JS властивість Event.focus
Загальний опис
Подія focus виникає, коли елемент отримує фокус. Це зазвичай стосується інтерактивних елементів, таких як текстові поля, кнопки або посилання. Подія focus є важливою для забезпечення правильної взаємодії користувача з формами, де потрібно відстежувати, на якому полі користувач зосередив увагу. Подію не можна відловити на таких елементах, як текст або зображення, але вона поширюється на елементи форм і посилання.
Для обробки події focus можна використовувати метод addEventListener. Наприклад:
const input = document.querySelector('input');
input.addEventListener('focus', function() {
console.log('Поле отримало фокус');
});
У цьому прикладі, коли текстове поле отримує фокус, у консолі з'являється відповідне повідомлення. Подію focus зазвичай використовують для надання користувачу додаткових вказівок, таких як відображення підказки, зміна стилю елемента або перевірка правильності введених даних.
Важливо зазначити, що подія focus не поширюється («bubbles»), тобто вона не піднімається по DOM-дереву до батьківських елементів. Якщо потрібно відслідковувати фокус на всіх елементах сторінки, можна використовувати подію focusin, яка є схожою, але має здатність поширюватись по дереву елементів.
Також focus часто використовують разом із подією blur, яка виникає, коли елемент втрачає фокус. Разом ці події дозволяють створювати динамічну і зручну взаємодію з формами. Наприклад, можна перевіряти введені дані, коли користувач залишає поле вводу, або робити поля видимими лише при взаємодії.
const input = document.querySelector('input');
input.addEventListener('focus', function() {
input.style.backgroundColor = 'yellow';
});
input.addEventListener('blur', function() {
input.style.backgroundColor = '';
});
У цьому прикладі, коли поле отримує фокус, воно змінює свій колір фону на жовтий, а після втрати фокуса повертає свій початковий вигляд.
| Порада: | Коли працюєте з подією |
| Порада: | Не забувайте використовувати метод |
| Порада: | Зміна стилів під час фокуса може зробити вашу сторінку більш динамічною та інтуїтивною. Наприклад, виділення активного поля форм різним кольором або додавання ефектів підсвічування покращує взаємодію користувача з елементами. |
| Порада: | При використанні фокуса з інтерфейсами з кількома інтерактивними елементами варто відслідковувати його втрачені стану за допомогою події |
Синтаксис
element.addEventListener('focus', function() {
// Код, що виконується при отриманні фокуса
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як подія focus використовується для відображення підказок до полів форми. Коли користувач отримує фокус на певному полі, підказка стає видимою, а коли втрачає фокус, вона зникає. Також передбачена кнопка, що автоматично переносить фокус на перше поле форми для зручності користувача.
У цьому прикладі, коли поле отримує фокус, відображається допоміжний текст, який зникає після втрати фокуса. Це може бути корисно для покращення зручності форм, коли потрібно дати користувачу додаткову інформацію лише під час вводу.
const input = document.getElementById('nameInput');
input.addEventListener('focus', function() {
const helpText = document.getElementById('helpText');
helpText.style.display = 'block'; // Відображаємо підказку
});
input.addEventListener('blur', function() {
const helpText = document.getElementById('helpText');
helpText.style.display = 'none'; // Приховуємо підказку
});Цей приклад демонструє, як подія focus може використовуватись для керування кнопками за допомогою клавіатури. Коли кнопка отримує фокус, користувачу показується повідомлення про можливість натиснути клавішу Enter для її активації, що покращує доступність додатка.
const button = document.getElementById('actionButton');
button.addEventListener('focus', function() {
alert('Кнопка отримала фокус, можна натиснути Enter для активації!');
});