Справочник API
.focusout() в jQuery
Содержание статьи
-
Категории: Events › Keyboard Events , Events › Mouse Events
Устанавливает (или вызывает) обработчики JavaScript события focusout (когда любой дочерний элемент теряет фокус ввода) для всех элементов набора jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.focusout( handler( eventObject ) )
Добавлено в jQuery 1.4.3.focusout( [ eventData ,] handler( eventObject ) )
Добавлено в jQuery 1.0.focusout( )
Команда .focusout() — сокращённый вариант события focusout, парного к .focusin(). Возникает, когда элемент (или любой его потомок) теряет фокус, и, в отличие от обычного blur, всплывает по дереву DOM — это позволяет отслеживать потерю фокуса делегированно, одним обработчиком на контейнере.
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
eventData – (объект) Данные, доступные обработчику через event.data.
handler( eventObject ) – Функция-обработчик события focusout.
Примечание:
Благодаря всплытию focusout удобен для отложенной проверки полей формы (валидации при уходе с поля) без привязки обработчика к каждому полю отдельно.
Примечание:
Событие всплывает вплоть до document, поэтому его удобно делегировать через .delegate() или .on() на статичном родителе, даже если поля формы добавляются динамически.
В jQuery 3.x и 4.0:
Шорткат .focusout() deprecated с jQuery 3.3, но не удалён — работает в 3.7.1 и 4.0. Замена:
.on("focusout", handler). Как и для .focusin(), в jQuery 4.0 убрана эмуляция focusout для браузеров без нативной поддержки — на современных браузерах поведение не меняется.
Примеры:
Проверить обязательное поле формы при уходе фокуса.
$('#email').focusout(function() { var ok = $(this).val().indexOf('@') > -1; $(this).toggleClass('field-error', !ok); });Делегированная валидация всех обязательных полей формы одним обработчиком, включая поля, добавленные позже.
$('#order-form').on('focusout', 'input[required]', function() { var empty = $(this).val().trim() === ''; $(this).toggleClass('field-error', empty); });Скрыть подсказку, показанную по focusin, когда поле теряет фокус.
$('#order-form').on('focusout', 'input[required]', function() { $(this).next('.hint').hide(); });