Как установить фокус на поле 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 того же элемента.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.