Элемент: событие focusin

Событие focusin срабатывает, когда элемент получает фокус после события focus. Эти два события различаются тем, что focusin распространяется вверх по DOM-дереву, а focus — нет.

Противоположностью событию focusin является событие focusout, которое срабатывает, когда элемент теряет фокус.

Событие focusin не является отменяемым.

Синтаксис

Используйте имя события в методах, таких как addEventListener().

addEventListener("focusin", (event) => {});

Тип события

Объект FocusEvent. Наследует от UIEvent и Event.

Свойства события

Этот интерфейс также наследует свойства от родительского интерфейса UIEvent и косвенно от Event.

FocusEvent.relatedTarget: Элемент, теряющий фокус, если таковой имеется.

Примеры

Интерактивный пример

HTML

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Результат

Спецификации

Спецификация
События UI # event-type-focusin

Примечание: В спецификации События UI описывается порядок событий фокуса, отличающийся от реализации в текущих браузерах.

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`focusin_event`	1 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	12 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	52 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	11.6	5	18 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	52 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	12.1	4.2	1.0 Свойство обработчика события `onfocusin` не поддерживается. Для прослушивания этого события используйте `element.addEventListener('focusin', function() {});`.	≤37

См. также

Связанные события: blur, focus, focusout
Фокусировка: focus/blur

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event