Выделить связанный label при получении фокуса
Материал из JQuery
Для улучшения визуальной связи элемента формы и его label'а можно выделять последний при получении фокуса элементом формы:
$("form :input").focus(function() { $("label[for='" + this.id + "']").addClass("labelfocus"); }).blur(function() { $("label").removeClass("labelfocus"); });
Продемонстрируем данный рецепт:
<!DOCTYPE html>
<html>
<head>
<style>
button, input{margin:10px}
label{padding:0 7px}
.labelfocus{background-color:red}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form>
<input id="textInput" type="text" value="" /><label for="textInput">Логин</label><br>
<input id="passInput" type="password" /><label for="passInput">Пароль</label><br>
</form>
<script>
$("form input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
</script>
</body>
</html>
