更改活动输入框上的标签颜色

Change label color on active inputbox

本文关键字：标签 颜色 活动 输入      更新时间：2023-09-26

有人知道为什么这不起作用吗？我想在输入框处于活动状态时从输入框中更改标签的颜色。

JavaScript：

$("input").focus(function() {
var inputID = document.activeElement.id;
document.getAnonymousElementByAttribute('label','for', inputID).setAttribute('class', 'active');
});

该 HTML：

<label for="username">Username</label>
<input name="username" id="username" type="text"><br>
<label for="passwort">Passwort</label>
<input name="passwort" id="passwort" type="password"><br>
<input type="submit" class="button" value="login">

CSS：

.active{
    color: #FFA500 !important;
}

我希望有人可以帮助我:)

使用您当前的 HTML：

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

JS小提琴演示。

或者，使用 on()（假设您使用的是 jQuery 1.7 或更高版本）：

$('input').on('focus blur', function(e){
    var prev = $(this).prev();
    prev[e.type == 'focus' ? 'addClass' : 'removeClass']('active');
});

JS小提琴演示。

更抽象（所以HTML结构无关紧要），通过for属性选择：

$('input').on('focus blur', function(e){
    var label = $('label[for="' + this.id + '"]');
    label[e.type == 'focus' ? 'addClass' : 'removeClass']('active');
});

JS小提琴演示。

引用：

  • addClass() .
  • 属性等于 （[attribute="value"]） 选择器。
  • blur() .
  • focus() .
  • on() .
  • prev() .
  • removeClass() .
$('input').on('click', function(){
    $(label).toggleClass('active');
});

你过于复杂的事情，保持简单，有时开发人员最有用的工具是退格键。

尝试input:focus而不是.active在 CSS 代码中。也省略!important。

input:focus{
   color: #FFA500;
}

您将 jQuery 函数与非 jQuery 混合使用。尝试只使用 jQuery 函数来处理您的任务。在下面的示例中，我将.focus()更改为.on('focus',callback)，这是相同的，但更容易理解。在jQuery中，你应该获取事件的目标，并通过$()包装它。您也可以使用this但我出于多种原因尽量不使用它。然后，您可以应用许多jQuery方法中的任何一种：

$("input").on('focus', function(ev) {
    var t = $(ev.target);
    t.addClass('active');
});

请参阅此处的一个非常基本的示例：http://jsfiddle.net/zn5fB/

在这里，对于事件触发的示例：http://jsfiddle.net/zn5fB/1/

使用 JavaScript 设置样式通常遵循以下格式：

document.getElementById("abc").style.[css property name in camel case] = "[value]";

你会发现使用像jQuery这样的库来使这（以及许多其他事情）变得更容易一点是很常见的。使用 jQuery，您可以编写如下代码：

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo"
$(".foo > BAR").css("color", "red");
相关文章：