Question

我有三个输入。我希望它们都以相同的宽度开始和结束，但是如果点击其中一个，我希望那个增加宽度和所有其他减少宽度。有没有办法，如果一个输入被聚焦而其他输入没有聚焦但是没有模糊，我可以在输入中应用一个新类？

可以在http://testserver1.staceylanehosting.net

找到一种工作模型

这是我的jQuery代码：

    $(document).ready(function() {
$('#wrapper-newsletter input[type="text"]').addClass("idleField");
$('#wrapper-newsletter input[type="text"]').focus(function() {
    $(this).removeClass("idleField").addClass("focusField");
    if (this.value == this.defaultValue){
        this.value = '';
    }
    if(this.value != this.defaultValue){
        this.select();
    }
});
$('#wrapper-newsletter input[type="text"]').blur(function() {
    $(this).removeClass("focusField").addClass("idleField-shrink");
    if ($.trim(this.value == '')){
        this.value = (this.defaultValue ? this.defaultValue : '');
    }
});

}）;

以下是HTML标记：

        <div id="wrapper-newsletter" class="grid_8">
    <h4>Receive Updates</h4>
    <p>To recieve notifications when our site is updated, enter your email address and name below!</p>
    <form>
        <input type="text" class="idleField" name="newsletter-name" value="Name" />
        <input type="text" class="idleField" name="newsletter-surname" value="Surname" />
        <input type="text" class="idleField" name="newsletter-email" value="Email" />
        <a href="#" title="Subscribe" class="button-blue">
            <span>Subscribe</span>
        </a>
    </form>
</div><!-- div#wrapper-newsletter -->

相关的CSS：

    #wrapper-newsletter input[type=text] { width: 102px; }
    .idleField { }
    .idleField-shrink{ width: 63px !important; }
    #wrapper-newsletter input[type=text]:focus { width: 180px; }

Answer 1

主要使用css可能更容易：

.idleField { }
.idleField-shrink{ width: 63px !important; }
.idleField-shrink:focus{ width: 120px !important; }

然后使用onClick（），您可以设置.idleField-shrink类的所有输入。

Answer 2

我不认为JavaScript对非聚焦/不模糊尚未和非聚焦/不模糊之间存在差异感。只需使用focus()和blur()即可轻松实现您的要求：

$('input').focus(
    function(){
        $(this).addClass('focused');
    }).blur(
    function(){
        $(this).removeClass('focused');
    });

JS Fiddle demo

如果您确实需要在视觉上区分具有焦点/模糊事件的元素，那么我建议使用类名（在我的示例中为hasHadFocus类）：

$('input').focus(
    function(){
        $(this).addClass('focused');
    }).blur(
    function(){
        $(this).removeClass('focused').addClass('hasHadFocus');
    });

JS Fiddle demo

这只是一个概念验证，我留给你放入你需要使用的特定宽度。

参考文献：

Answer 3

想出来。如果你很想看到结果，或者在这里寻找问题的答案：

http://jsfiddle.net/stacigh/q8T7r/3/

jQuery输入集中，模糊和中间的一切

3 个答案: