输入框获得焦点时，突出显示相关标签

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

asheep

# 2012 年 3 月 5 日

请给我这个例子 :(

jamie paterson

# 2012 年 3 月 29 日

这将派上用场，将在选择时使用微妙的 rgba 颜色背景 - 干杯 :-)

JohnMotyJr

# 2013 年 3 月 17 日

我用这个进行了一个测试用例，因为我以前用的是很长的方式。结果发现，如果你恰好已经知道标签的 for="" 和输入的 id，那么 switch case 会更快。

$('form :input').bind({
    focus: function () {
        var id = $(this).attr('id').toString();
        var add = $("label[for='" + this.id + "']").addClass('labelfocus');
        switch (id) {
            case 'title':add;break;
            case 'description':add;break;
            case 'resource':add;break;
            case 'tag':add;break;
            case 'theme':add;break;
            case 'language':add;break;
        }
    },
    blur: function () {
        $('label').removeClass('labelfocus');
    }
});

jsPerf 基准测试用例（稍微修改了触发事件）。但是，我更喜欢这种方法，因为它代码量少，易于使用，尤其是对于动态表单。

David Tintner

# 2013 年 12 月 13 日

如果你将标签放在输入之后，你可以用 CSS 来样式化它。

<input id="something-cool" type="text" />
<label for="something-cool">Something Cool</label>

input:focus + label { position: relative; top: -20px; }

Victor Pavlov

# 2014 年 4 月 9 日

这里有一个非常好的例子它实现起来就像一个小的 jQuery 插件，可以根据你的需要进行自定义。

Sumit Singh

# 2019 年 8 月 20 日

我希望当输入框有值时，标签上也有相同的类。如何实现？

评论

发表回复 取消回复

发表回复取消回复