jQuery输入集中、模糊，以及中间的所有内容

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

可在以下位置找到一种工作模型：

以下是我的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可能更容易：

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

---

然后，使用onClick（）可以将所有输入设置为.idleField收缩类。

我不认为JavaScript对未聚焦/尚未模糊和未聚焦/未模糊之间有任何区别。只需使用

focus（）

和

blur（）

即可轻松实现您的要求：

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

hasHadFocus

类）：

这只是一个概念的证明，我把它留给你放在你需要使用的具体宽度

参考资料：

---

找到了答案。如果您对结果感到好奇，或者正在这里寻找问题的答案：

---

试图更好地理解。。。假设所有输入都以100px开始。在点击第一个后，它应该增长到，比如说，120px，并且您希望非聚焦输入收缩到，比如说，63px。对吗？对！但是如果用户点击了字段外，所有的输入返回到100px，不管它们是否被点击。有没有一种方法，我可以告诉jquery，所有这些输入都是相关的，一旦一个被聚焦，就将classA应用到聚焦的元素，将classB应用到其他元素？这不起作用，因为一旦所有的输入都被点击，它们需要返回到原始宽度互动已停止。感谢您的回答。虽然我不赞成你的确切做法，但你的回答确实把我引向了正确的方向，其余的我都能自己解决。：）

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

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

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