1

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

可以在以下位置找到一种工作模型：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; }
4

3 回答 3

0

主要使用 css 可能更容易：

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

然后使用 onClick() 您可以将所有输入设置为 .idleField-shrink 类。

于 2011-10-23T00:45:48.217 回答
0

我不认为 JavaScript 对未聚焦/未模糊和未聚焦/未模糊之间的区别有任何看法。focus()只需使用and即可轻松实现您的要求blur()：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

这只是一个概念验证，我让您输入您需要使用的特定宽度。

参考：

于 2011-10-23T00:49:54.527 回答
0

弄清楚了。如果您想知道结果或在这里寻找问题的答案：

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

于 2011-10-30T01:46:22.493 回答