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

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

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

Событие focus не может быть отменено.

Синтаксис

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

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

onfocus = (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 password = document.querySelector('input[type="password"]');

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

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});

Результат

Делегирование событий

Существует два способа реализации делегирования событий для этого события: с помощью события focusin или путем задания параметра useCapture метода addEventListener() в значение true.

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(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

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

Результат

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

Спецификация
События UI # event-type-focus
HTML # handler-onfocus

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`focus_event`	1	12	24 6–24 Интерфейс для этого события - `Event`, а не `FocusEvent`.	11.6	3.1	18	24 6–24 Интерфейс для этого события - `Event`, а не `FocusEvent`.	12.1	2	1.0	4.4

См. также

Метод HTMLElement.focus()
Связанные события: blur, focusin, focusout
Это событие на Window целевых: событие focus
Фокусировка: 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/focus_event