JS об'єкт Focus
Опис
Focus Events включає події, що відстежують, коли елемент отримує або втрачає фокус, і зазвичай використовуються для формових елементів, таких як input, textarea, button. Основними подіями є focus, яка спрацьовує, коли елемент отримує фокус, та blur, що активується при втраті фокусу. Це дозволяє реагувати на введення даних або зміну фокусу в інтерфейсі користувача, надаючи зручність при роботі з формами.
Подія focus спрацьовує на початку взаємодії з елементом, і її часто використовують для зміни стилів, перевірки значень або відображення підказок. Наприклад, можна змінювати кольорову рамку поля при фокусі, що вказує користувачеві, де він зараз знаходиться.
inputElement.addEventListener('focus', (event) => {
event.target.style.borderColor = 'blue';
});
blur дозволяє обробляти ситуації, коли користувач покидає елемент, наприклад, для перевірки введеного значення або зняття виділення. Завдяки цій події можна запускати валідацію даних, яку слід робити після введення, але не під час. У випадку помилки можна, наприклад, додати червону рамку або повідомлення для користувача.
inputElement.addEventListener('blur', (event) => {
if (!event.target.value) {
event.target.style.borderColor = 'red';
}
});
Існують також події focusin та focusout, які є делегованими версіями focus і blur. Вони спрацьовують навіть якщо фокус переходить на дочірній елемент, що дозволяє їх використовувати для обробки подій на батьківських елементах.
formElement.addEventListener('focusin', (event) => {
event.target.style.backgroundColor = 'lightyellow';
});
focusin і focusout зручні для роботи зі складними формами, де потрібно відстежувати фокус на всіх вкладених полях, не вказуючи кожне з них окремо. На відміну від focus та blur, які не можуть "бульбашитися" догори, focusin і focusout піднімаються від дочірніх елементів до батьківських. Це важлива відмінність, яка робить їх особливо корисними для відстеження фокусу на великих формах чи списках елементів.
| Порада: | Пам'ятайте, що подія |
| Порада: | Використовуйте |
| Порада: | Щоб виділити активний елемент при фокусі, рекомендується використовувати класи замість прямих стилів в обробнику |
Синтаксис
element.addEventListener('focus', (event) => {
// код, що виконується при отриманні фокусу
});
element.addEventListener('blur', (event) => {
// код, що виконується при втраті фокусу
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
26 |
24 |
7 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
26 |
24 |
7 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі JavaScript реагує на focus і blur події, щоб динамічно підсвічувати поля та перевіряти, чи вони заповнені, коли фокус втрачається. При натисканні на кнопку "Скинути" всі поля очищуються та повертаються до початкового вигляду, що дозволяє зручно повторно використовувати форму.
Цей приклад дозволяє автоматично перевіряти кожне поле форми, коли користувач покидає його, встановлюючи червону рамку, якщо поле порожнє. Це корисно для базової перевірки форми, оскільки користувач отримує зворотний зв'язок одразу після виходу з поля, навіть до відправки форми.
const formFields = document.querySelectorAll('.form-field');
formFields.forEach(field => {
field.addEventListener('blur', (event) => {
if (event.target.value === '') {
event.target.style.borderColor = 'red';
alert('Поле не може бути порожнім!');
} else {
event.target.style.borderColor = 'green';
}
});
});У цьому прикладі реалізовано підсвічування активного поля форми, коли користувач фокусується на ньому, та повернення до звичайного стану при виході з фокусу. Завдяки використанню focusin та focusout обробники встановлюються на всю форму одразу, що зручно для роботи зі складними структурами з великою кількістю полів.
const form = document.getElementById('my-form');
form.addEventListener('focusin', (event) => {
if (event.target.classList.contains('form-field')) {
event.target.style.backgroundColor = 'lightyellow';
}
});
form.addEventListener('focusout', (event) => {
if (event.target.classList.contains('form-field')) {
event.target.style.backgroundColor = '';
}
});Методи
Властивості
relatedTarget- Властивість події, яка повертає посилання на пов'язаний елемент під час переходу фокусу, тобто елемент, з якого або на який перемістився фокус.