JS властивість Event.blur
Загальний опис
blur — це подія, яка виникає, коли елемент втрачає фокус. Вона найчастіше використовується з елементами форми, такими як <input>, <textarea>, та <select>, де важливо відстежувати, коли користувач переміщає фокус з одного елемента на інший. Подія blur дозволяє виконувати перевірку введених даних або зберігати введені користувачем значення перед тим, як він переміститься на інший елемент форми.
Подія blur не є бульбашковою, що означає, що вона не поширюється (не спливає) на батьківські елементи DOM. Це відрізняє її від події focusout, яка викликається в аналогічних обставинах, але підтримує бульбашковий механізм. Наприклад, ви можете використати blur для виконання певних дій, коли користувач залишає текстове поле:
const inputField = document.getElementById('inputField');
inputField.addEventListener('blur', function(event) {
console.log('Поле втратило фокус, перевіряємо значення.');
// Виконання перевірки введених даних
});
У цьому прикладі, коли користувач залишає текстове поле з ідентифікатором inputField, браузер виконує функцію, яка може перевірити чи обробити введене значення. Це дозволяє розробникам забезпечити, що дані, введені користувачем, відповідають певним критеріям, перш ніж продовжити з наступним елементом.
Подія blur часто використовується разом із подією focus, яка викликається, коли елемент отримує фокус. Це дозволяє створювати інтерактивні форми, які реагують на дії користувача, перевіряють введені дані в реальному часі, або відображають додаткову інформацію або підказки.
Подія blur може бути корисною в різних ситуаціях, таких як підтвердження даних, відправлення запитів до сервера для збереження даних у реальному часі, або показ попереджень користувачу, якщо введені дані не відповідають вимогам. Вона є важливою частиною роботи з формами та інтерактивними елементами на веб-сторінці.
| Порада: | З подією |
| Порада: | Використовуйте подію |
| Порада: | Не забувайте про підтримку доступності. Коли ви використовуєте подію |
Синтаксис
element.addEventListener('blur', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі, коли користувач залишає текстові поля "Ім'я користувача" або "Електронна пошта", подія blur запускає валідацію введених даних. Якщо ім'я користувача містить менше 3 символів або електронна адреса не відповідає формату, користувачу показується повідомлення про помилку. Це забезпечує негайний зворотний зв'язок користувачу та допомагає запобігти введенню некоректних даних у форму.
У цьому прикладі, коли користувач залишає поле для введення електронної пошти, скрипт перевіряє, чи введена адреса містить символи '@' і '.', щоб переконатися, що це дійсно електронна адреса. Якщо ні, з'являється попередження.
const emailInput = document.getElementById('emailInput');
emailInput.addEventListener('blur', function(event) {
const email = event.target.value;
if (!email.includes('@') || !email.includes('.')) {
alert('Введіть коректну адресу електронної пошти.');
}
});У цьому прикладі, коли користувач залишає текстове поле для введення нотаток, введені дані автоматично зберігаються в локальному сховищі браузера. Це дозволяє зберегти введену інформацію навіть у випадку випадкового закриття сторінки або оновлення браузера.
const notesInput = document.getElementById('notesInput');
notesInput.addEventListener('blur', function(event) {
localStorage.setItem('notes', event.target.value);
console.log('Зміни збережено у локальному сховищі.');
});