JS властивість Event.focusin
Загальний опис
Подія focusin виникає, коли елемент або будь-який з його дочірніх елементів отримує фокус. Це схоже на подію focus, але з тією різницею, що focusin може спливати вгору по DOM-дереву, дозволяючи обробляти події фокусу не тільки на елементах, але й на їх контейнерах.
Уявіть, що у вас є форма з кількома полями. Якщо ви хочете відстежувати, коли будь-яке поле в цій формі отримує фокус, ви можете використати подію focusin на елементі форми. Це дозволить вам не прив'язувати окремий обробник для кожного поля форми, а натомість реагувати на фокус для всієї групи елементів.
Ось базовий приклад:
const form = document.querySelector('form');
form.addEventListener('focusin', function(event) {
console.log('Поле отримало фокус:', event.target);
});
У цьому прикладі подія focusin реагує на будь-яке поле форми, яке отримує фокус, і виводить у консоль елемент, що його отримав.
Особливістю focusin є те, що вона спливає (bubbling), на відміну від події focus. Це означає, що ви можете повісити обробник на батьківський елемент і отримати доступ до всіх елементів, які фокусуються всередині нього, без необхідності прив’язувати обробники до кожного окремого поля.
Якщо вам потрібно робити щось подібне з елементами, які втрачають фокус, використовуйте подію focusout, яка також має можливість спливання.
Ще один приклад:
document.addEventListener('focusin', function(event) {
event.target.style.backgroundColor = 'lightyellow';
});
Цей код змінює фон елемента, який отримав фокус, на жовтий.
Важливо зазначити, що подія focusin підтримується більшістю сучасних браузерів, але якщо ви розробляєте додатки з використанням старих версій браузерів, переконайтеся, що ваш код має відповідні поліфіли чи альтернативи.
| Порада: | Наскільки зручно використовувати |
| Порада: | У складних формах можна створювати умовну логіку на основі типу елемента, що отримав фокус. Наприклад, якщо фокус переміщується між текстовими полями, виконувати одну дію, а якщо фокус переходить на кнопки або чекбокси — іншу. |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('focusin', function(event) {
// Код, що виконується при спрацюванні події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач взаємодіє з полями форми, і коли будь-яке з полів отримує фокус, до нього додається клас highlight, який змінює його стиль (обводка стає зеленою). При втраті фокусу клас видаляється. Це дозволяє легко відстежувати і підсвічувати активні елементи форми.
Цей приклад ілюструє, як відслідковувати фокус тільки на текстових полях у складній формі, залишаючи інші елементи без змін. Це зручно для ситуацій, коли потрібно застосувати певну логіку лише до певних типів полів.
const form = document.querySelector('#complexForm');
form.addEventListener('focusin', function(event) {
if (event.target.tagName === 'INPUT' && event.target.type === 'text') {
console.log('Фокус на текстовому полі:', event.target.name);
}
});Цей код демонструє, як можна відслідковувати фокусування на кнопках у документі та змінювати їхні стилі динамічно. Це може бути корисно для поліпшення інтерфейсу, роблячи активні елементи більш помітними для користувача.
document.addEventListener('focusin', function(event) {
if (event.target.tagName === 'BUTTON') {
event.target.style.borderColor = 'green';
}
});