🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Какое событие сработает при потери фокуса элементом формы?
Событие, которое срабатывает при потере фокуса элементом формы, называется blur.
🚩Почему нужно событие `blur`?
Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.
Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.
🚩Как оно работает?
blur срабатывает, когда элемент теряет фокус, то есть пользователь:
Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.
🚩Как использовать `blur`?
Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например, onblur).
2. JavaScript через метод addEventListener.
Пример на практике
Пример blur
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
Введите имя:
Отправить
🚩Особенности события `blur`
🟠Не всплывает
Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.
// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
🟠Отличие от `change`
Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.
Ставь 👍 и забирай 📚 Базу знаний