Справочник API
.focusin() в jQuery
Содержание статьи
-
Категории: Events › Keyboard Events , Events › Mouse Events
Устанавливает (или вызывает) обработчики JavaScript события focusin (когда любой дочерний элемент получает фокус ввода) для всех элементов набора jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.focusin( handler( eventObject ) )
Добавлено в jQuery 1.4.3.focusin( [ eventData ,] handler( eventObject ) )
Добавлено в jQuery 1.0.focusin( )
Команда .focusin() — сокращённый вариант события focusin. В отличие от обычного .focus(), событие focusin всплывает: оно срабатывает не только на элементе, получившем фокус, но и на всех его родителях, что делает его удобным для делегирования — например, чтобы одним обработчиком на форме отследить получение фокуса любым полем внутри неё.
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
eventData – (объект) Данные, доступные обработчику через event.data.
handler( eventObject ) – Функция-обработчик события focusin.
Примечание:
Именно всплытие отличает focusin от .focus(): обработчик, поставленный на форму через focusin, сработает при получении фокуса любым полем внутри неё, без необходимости вешать обработчик на каждое поле отдельно.
Примечание:
Парный метод для потери фокуса с тем же поведением всплытия — .focusout().
В jQuery 3.x и 4.0:
Шорткат .focusin() deprecated с jQuery 3.3, но не удалён — работает в 3.7.1 и 4.0. Замена:
.on("focusin", handler). Отдельно в jQuery 4.0 убрана внутренняя эмуляция (шим) событий focusin/focusout для браузеров, которые не поддерживали их нативно — начиная с 4.0 jQuery полагается на нативную реализацию браузера. Так как все актуальные браузеры (Chrome, Firefox, Safari, Edge) поддерживают focusin/focusout нативно уже давно, на практике это изменение почти ни на что не влияет; исключение — код, зависевший от точного порядка focus/focusin в очень старых версиях IE.
Примеры:
Подсветить поле формы, получившее фокус, одним обработчиком на форме — за счёт всплытия события.
$('#order-form').focusin(function(event) { $(event.target).addClass('field-active'); });Тот же пример через современный .on().
$('#order-form').on('focusin', function(event) { $(event.target).addClass('field-active'); });Показ подсказки при получении фокуса, с делегированием на обязательные поля.
$('#order-form').on('focusin', 'input[required]', function() { $(this).next('.hint').show(); });