Срабатывание JavaScript при потере фокуса элементом в HTML

Быстрый ответ

В случае необходимости выполнения кода JavaScript, после того как элемент потеряет фокус, может быть использовано событие blur.

document.querySelector('#elementID').addEventListener('blur', () => {
    // Здесь разворачивается всякий магический код, который вам потребуется
    alert('Элемент потерял фокус');
});

Не забудьте заменить #elementID на идентификатор вашего элемента и alert на код, который вам требуется выполнить.

Встроенное событие onblur

Можно встроить обработчик событий прямо в HTML-элемент. Этот метод подходит для решения простых задач.

<input type="text" onblur="console.log('Ниндзя исчез!');" />

В данном случае, когда поле потеряет фокус, в консоли отобразится сообщение 'Ниндзя исчез!', обеспечивая мгновенный отклик.

Взаимодействие событий onblur и focusout

Валидация данных формы в реальном времени с использованием onblur

При использовании onblur у ваших форм появляется возможность проводить валидацию данных в режиме реального времени, тут же после того, как пользователь переходит к следующему полю формы.

function validateInput(inputElement) {
    if (inputElement.value.length < 3) {
        console.error('Введено слишком мало символов. Пожалуйста, введите больше.');
    }
}

document.querySelector('#username').addEventListener('blur', function() {
    validateInput(this);
});

Подробнее об этом расскажет наш спикер на видео

Focusout как альтернатива

У события focusout, в отличие от onblur, есть свойство всплывания, что делает его более удобным при делегировании событий.

document.querySelector('#formIO').addEventListener('focusout', (event) => {
    console.log('Событие focusout сработало!');
});

Визуализация

Вот что происходит с событием onblur, когда акцент внимания перемещается с конкретного элемента – он исчезает, точно так же как актер, уходящий в темноту за сцену.

Перед: 🔦🎭 (На сцене — в центре внимания)
После: 🎭🌑 (За кулисами — вне внимания)

Именно тогда, когда центр внимания меняется, событие onblur приходит на сцену.

element.onblur = function() { 
  console.log('Занавес спущен, спектакль закончен!');
};

Профессиональные рекомендации и трюки

Фокусировка Джедая: Управление сложными интерфейсами, например, модальными окнами или выпадающими меню

Использование blur на модальных окнах или при работе с выпадающими меню может вызвать неожиданные трудности, когда событие всплывает от дочернего элемента.

let dropdown = document.querySelector('#dropdown');

dropdown.addEventListener('blur', (event) => {
  if (!dropdown.contains(event.relatedTarget)) {
    console.log('Меню закрыто, фокус смещен.');
  }
}, true);

Предотвращение срабатывания blur при быстрой навигации

При быстром переключении между полями пользователи могут случайно вызвать событие blur. Для справления с этой проблемой может быть применено решение с функцией debouncing.

let timer;
function debounceBlur(fn, delay) {
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

document.querySelector('#inputField').addEventListener('blur', debounceBlur(() => {
  console.log('Медленнее! Я все еще обрабатываю данные.');
}, 300));

Выбор вашего направления: blur или focusout

В зависимости от требуемых задач, вам, как разработчику, может потребоваться выбирать между blur и focusout. В случае отслеживания состояния фокуса на контейнере более удобным будет являться focusout благодаря его свойству всплывания.

document.querySelector('#container').addEventListener('focusout', (event) => {
    console.log('Фокус перемещен вне контейнера!');
});

Полезные ресурсы

1. Событие blur элемента – Веб API | MDN — Детальная информация о событии blur в JavaScript.
2. Атрибут события onblur в HTML — Руководство по использованию атрибута onblur в HTML.
3. Фокусировка: focus/blur – JavaScript.Info — Углубленный материал о фокусировке и потере фокуса.
4. Как обнаружить клик за пределами элемента? – Stack Overflow — Доступные методы обнаружения смены фокуса, основанные на опыте сообщества.
5. Свойство activeElement документа – Веб API | MDN — Всё, что стоит знать о управлении фокусом посредством Document.activeElement.