Jquery потеря фокуса input

Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab . Также существует HTML-атрибут autofocus , который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них – далее.

Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.

Момент потери фокуса («blur») может быть важнее. Это момент, когда пользователь кликает куда-то ещё или нажимает Tab , чтобы переключиться на следующее поле формы. Есть другие причины потери фокуса, о них – далее.

Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.

В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.

События focus/blur

Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

Используем их для валидации(проверки) введённых данных.

  • Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
  • Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):

Современный HTML позволяет делать валидацию с помощью атрибутов required , pattern и т.д. Иногда – это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.

Методы focus/blur

Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.

Читайте также:  Asus f553ma драйвера windows 7

Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.

Потеря фокуса может произойти по множеству причин.

Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:

  • alert переводит фокус на себя – элемент теряет фокус (событие blur ), а когда alert закрывается – элемент получает фокус обратно (событие focus ).
  • Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.

Используя эти события, нужно быть осторожным. Если мы хотим отследить потерю фокуса, которую инициировал пользователь, тогда нам следует избегать её самим.

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: , , , и т.д.

С другой стороны, элементы форматирования

, ,

– по умолчанию не могут получить фокус. Метод elem.focus() не работает для них, и события focus/blur никогда не срабатывают.

Это можно изменить HTML-атрибутом tabindex .

Любой элемент поддерживает фокусировку, если имеет tabindex . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет tabindex="1" , а второй tabindex="2" , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

Порядок перебора таков: сначала идут элементы со значениями tabindex от 1 и выше, в порядке tabindex , а затем элементы без tabindex (например, обычный ).

Читайте также:  Задачи на определение возраста

При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.

Есть два специальных значения:

tabindex="0" ставит элемент в один ряд с элементами без tabindex . То есть, при переключении такие элементы будут после элементов с tabindex ≥ 1 .

Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .

tabindex="-1" позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab :

Порядок такой: 1 — 2 — 0 . Обычно
не поддерживает фокусировку, но tabindex включает её, а также события и стилизацию псевдоклассом :focus .

Мы можем добавить tabindex из JavaScript, используя свойство elem.tabIndex . Это даст тот же эффект.

События focusin/focusout

События focus и blur не всплывают.

Например, мы не можем использовать onfocus на

Пример выше не работает, потому что когда пользователь перемещает фокус на , событие focus срабатывает только на этом элементе. Это событие не всплывает. Следовательно, form.onfocus никогда не срабатывает.

У этой проблемы два решения.

Первое: забавная особенность – focus/blur не всплывают, но передаются вниз на фазе перехвата.

Второе решение: события focusin и focusout – такие же, как и focus/blur , но они всплывают.

Заметьте, что эти события должны использоваться с elem.addEventListener , но не с on .

Второй рабочий вариант:

Итого

События focus и blur срабатывают на фокусировке/потере фокуса элемента.

  • Они не всплывают. Но можно использовать фазу перехвата или focusin/focusout .
  • Большинство элементов не поддерживают фокусировку по умолчанию. Используйте tabindex , чтобы сделать фокусируемым любой элемент.

Материал из JQuery

Устанавливает функцию handler в качестве обработчика события focusout, на выбранные элементы.
Метод является аналогом bind("focusout", handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

Читайте также:  Почему фильм не делается на весь экран

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("focusout", eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .

Убрать установленный обработчик можно с помощью метода unbind().

Метод хорошо сочитается с focusin() и плохо с focus() (оба являются методами получения фокуса).

В отличае от blur, событие focusout происходит как при потери фокуса самим элементом, так и его дочерними.

Определение и применение

jQuery метод .focusout() привязывает JavaScript обработчик событий "focusout" (потеря фокуса элементом, или любым вложенным элементом), или запускает это событие на выбранный элемент. Если Вам необходимо привязать JavaScript обработчик событий, который срабатывает при получении фокуса элементом, или любым вложенным элементом, то воспользуйтесь методом .focusin().

Обращаю Ваше внимание, что метод .focusout() в отличие от метода .blur() поддерживает всплывающие события (event bubbling).

jQuery синтаксис:

Обращаю Ваше внимание, что метод .focusout(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

Добавлен в версии jQuery

Значения параметров

Параметр Описание
eventData Объект, содержащий данные, которые будут переданы в обработчик событий.
handler Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event .

Пример использования

В этом примере с использованием jQuery метода .focusout() мы при нажатии на элемент (кнопка) вызываем событие "focusout" на элементе

Результат нашего примера:

Пример использования jQuery метода .focusout() (без параметров и с функцией) jQuery события