Выделить связанный label при получении фокуса

<< Рецепты

Для улучшения визуальной связи элемента формы и его label'а можно выделять последний при получении фокуса элементом формы: 

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

Продемонстрируем данный рецепт: 

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    button, input{margin:10px}
    label{padding:0 7px}
    .labelfocus{background-color:red}
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~

  ~lt~form~gt~
    ~lt~input id="textInput" type="text" value="" /~gt~~lt~label for="textInput"~gt~Логин~lt~/label~gt~~lt~br~gt~
    ~lt~input id="passInput" type="password" /~gt~~lt~label for="passInput"~gt~Пароль~lt~/label~gt~~lt~br~gt~
  ~lt~/form~gt~

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

~lt~/body~gt~
~lt~/html~gt~


Используемые методы и селекторы jQuery