jQuery 输入集中、模糊以及介于两者之间的所有内容

发布于 2024-12-11 07:18:42 字数 1911 浏览 0 评论 0原文

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

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

原文

I have three inputs. I want them all to start and end with the same width but in the event one of them is clicked, i want that one to increase width and ALL THE OTHERS to decrease widths. Is there a way that, if one input is focused and the others are NOT focused but NOT YET blurred, I can apply a new class to the inputs?

A sort of working model can be found at: http://testserver1.staceylanehosting.net

Here is my jQuery code:

    $(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 : '');
    }
});

});

Here is the HTML Markup:

        <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 -->

And the relevant CSS:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2024-12-18 07:18:42

主要使用 css 可能更容易完成：

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

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

Might be easier to do mainly with css:

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

Then with onClick() you can set all inputs to the .idleField-shrink class.

回复收藏 0 原文

猛虎独行 2024-12-18 07:18:42

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

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

JS Fiddle 演示。

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

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

JS Fiddle 演示。

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

参考文献：

I don't think that JavaScript has any perception of difference between not-focused/not-blurred yet and not-focused/not-blurred. It's easy enough to achieve what you're asking just using focus() and blur():

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

JS Fiddle demo.

If you do need to visually distinguish between elements that have, and have not, had focus/blur events, then I'd suggest using a class-name (in my example the hasHadFocus class):

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

JS Fiddle demo.

This is only a proof-of-concept, I leave it to you to put in the specific widths you need to use.

References:

回复收藏 0 原文