Изменить цвет метки на активном поле ввода

0

Кто-нибудь знает, почему это не работает? Я хочу изменить цвет метки из поля ввода, когда поле активно.

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

Я надеюсь, что кто-то может мне помочь :)

Теги:

5 ответов

2
Лучший ответ

С вашим текущим HTML:

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

Демо-версия JS Fiddle.

Или, с on() (если вы используете jQuery 1.7 или выше):

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

Демо-версия JS Fiddle.

Более абстрактно (так что HTML-структура не имеет значения), выбирая атрибут for:

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

Демо-версия JS Fiddle.

Рекомендации:

Поделиться
  • 0
    На JS Fiddle он работает очень хорошо, но я ничего - ничего. Класс не будет добавлен. Я использую jquery-2.0.3. это проблема?
  • 0
    Большое спасибо - я забыл $(document).ready
Показать ещё 2 комментария
0 
$('input').on('click', function(){
    $(label).toggleClass('active');
});

Ваши излишние вещи, пусть это просто, иногда разработчиком наиболее полезным инструментом является ключ backspace.

Поделиться
0

См. Здесь очень простой пример: 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");
Поделиться
0

Попробуйте input:focus вместо .active в вашем коде CSS. Не !important

input:focus{
   color: #FFA500;
}
Поделиться
0

Вы смешиваете функции jQuery с не-jQuery. Попробуйте использовать только функции jQuery для обработки вашей задачи. В моем примере ниже я изменил .focus() на .on('focus',callback) который является таким же, но более понятным. В jQuery вы должны получить цель своего события и обернуть его $(). Вы также можете использовать this но я стараюсь не использовать его по нескольким причинам. Затем вы можете применить любой из многих методов jQuery:

$("input").on('focus', function(ev) {
    var t = $(ev.target);
    t.addClass('active');
});
Поделиться
  • 1
    Здравствуйте, ваше сообщение было помечено как "низкое качество", вероятно, потому что оно состоит исключительно из кода. Вы могли бы значительно улучшить свой ответ, предоставив объяснение того, как именно и почему это отвечает на вопрос?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню