Як встановити фокус на полі input по кліку на label

Поточна коротка замітка розповість читачам сайту http://druweb.ru про те, як, використовуючи бібліотеку JQuery, що розширює можливості JavaScript, можна зробити автоматичне фокусування на елементі текстового поля input по одному лише кліку на пов’язаний з ним заголовок / мітку label. Дивимося.

JavaScript:

jQuery(document).ready(function($) {
$(‘label’).click(function() {
var identifikator_zagolovka = $(this).attr(‘for’);
$(‘#’+identifikator_zagolovka).trigger(‘focus’);
// або можна ще ось так:
$(‘[name=”‘+identifikator_zagolovka+'”]’).trigger(‘focus’);
});
});

HTML:

<form method=”POST” name=”example-form”>
<label for=”email”>Адреса електронної пошти</label>
<input id=”email” type=”text” name=”email” value=”” />
<!– … –>
</form>

При цьому атрибут for повинен бути рівний або значенню атрибута id текстового поля, або name того ж елемента.