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 = '';
});

У цьому прикладі, коли поле отримує фокус, воно змінює свій колір фону на жовтий, а після втрати фокуса повертає свій початковий вигляд.

правити

Порада

Коли працюєте з подією focus, враховуйте, що вона не підтримує поширення (bubbling). Якщо потрібно відстежувати, коли фокус переміщується по всіх елементах на сторінці, використовуйте focusin замість focus. Це може бути корисно для складних інтерфейсів, де потрібно реагувати на взаємодію з будь-яким полем форми.

автор: Bond правити

Порада

Не забувайте використовувати метод focus() для автоматичного надання фокуса певним елементам, наприклад, коли користувач відкриває форму або модальне вікно. Це покращує доступність та зручність інтерфейсу.

автор: Bond правити

Порада

Зміна стилів під час фокуса може зробити вашу сторінку більш динамічною та інтуїтивною. Наприклад, виділення активного поля форм різним кольором або додавання ефектів підсвічування покращує взаємодію користувача з елементами.

автор: Bond правити

Порада

При використанні фокуса з інтерфейсами з кількома інтерактивними елементами варто відслідковувати його втрачені стану за допомогою події blur. Це корисно для валідації даних або зміни вигляду елемента після його заповнення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('focus', function() {
  // Код, що виконується при отриманні фокуса
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="nameInput">Демонстраційний елемент</div>

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'; // Приховуємо підказку
});

<div id="actionButton">Демонстраційний елемент</div>

const button = document.getElementById('actionButton');
button.addEventListener('focus', function() {
  alert('Кнопка отримала фокус, можна натиснути Enter для активації!');
});