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

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

Элемент потеряет фокус, если будет выбран другой элемент. Элемент также потеряет фокус, если будет применён стиль, не позволяющий получить фокус, например, hidden, или если элемент будет удален из документа — в обоих этих случаях фокус переместится на элемент body (видовое окно). Однако обратите внимание, что blur не срабатывает, когда фокусированный элемент удаляется из документа.

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

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

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

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

onblur = (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 = "";
});

Результат

Существует два способа реализации делегирования событий для этого события: с помощью события focusout или путем установки параметра 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,
);

Результат

Значение Document.activeElement может отличаться в разных браузерах во время обработки этого события (ошибка Firefox 452307): IE10 устанавливает его в значение элемента, на который будет переведён фокус, в то время как Firefox и Chrome часто устанавливают его в значение body документа.

• Метод HTMLElement.blur()
• Связанные события: focus, focusin, focusout
• Это событие для элементов Window: событие blur
• Фокусировка: focus/blur