JS метод Element.focus()

Загальний опис

Метод focus() є частиною DOM і дозволяє встановити фокус на вказаний елемент HTML. Цей метод є особливо корисним для інтерактивних веб-додатків, де потрібно керувати фокусом між різними елементами інтерфейсу, такими як поля введення, кнопки та посилання. Правильне керування фокусом забезпечує зручність використання для користувачів, особливо тих, хто покладається на клавіатуру для навігації.

Використання методу focus() є досить простим. Розглянемо приклад з HTML-розміткою, що містить поле введення:

<input type="text" id="myInput">

Щоб встановити фокус на це поле введення за допомогою JavaScript, можна використати наступний код:

const inputField = document.getElementById('myInput');
inputField.focus();

Після виконання цього коду курсор буде автоматично встановлено в поле введення myInput, і користувач зможе одразу почати вводити текст.

Метод focus() часто використовується у поєднанні з обробниками подій, такими як click або submit. Наприклад, можна встановити фокус на поле введення після натискання кнопки:

<input type="text" id="myInput">
<button id="myButton">Фокус на поле введення</button>

const inputField = document.getElementById('myInput');
const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  inputField.focus();
});

У цьому прикладі після натискання кнопки myButton фокус буде встановлено на поле введення myInput.

Метод focus() також може бути корисним у формах з кількома полями введення. Наприклад, після успішної валідації одного поля можна автоматично встановити фокус на наступне поле:

<input type="text" id="field1">
<input type="text" id="field2">

const field1 = document.getElementById('field1');
const field2 = document.getElementById('field2');

field1.addEventListener('input', () => {
  if (isValid(field1.value)) {
    field2.focus();
  }
});

У цьому прикладі після введення коректних даних у перше поле field1 фокус автоматично переміститься на друге поле field2.

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

Важливо зазначити, що метод focus() не завжди буде успішно виконаний через обмеження безпеки браузера. Наприклад, встановлення фокусу на елемент може бути заблоковано, якщо воно ініційоване подією, не пов'язаною з взаємодією користувача. У таких випадках можна використовувати методи requestAnimationFrame або setTimeout для відкладеного виконання focus().

Метод focus() є потужним інструментом для керування фокусом у веб-додатках і забезпечення зручності використання для користувачів. Його можна комбінувати з різними обробниками подій та іншими методами DOM для створення інтерактивних і доступних веб-інтерфейсів.

Розглянемо ще один приклад використання методу focus() у поєднанні з іншими методами DOM. Припустимо, ми маємо форму реєстрації з кількома полями введення:

<form id="registrationForm">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" required>
  
  <label for="email">Електронна пошта:</label>
  <input type="email" id="email" required>
  
  <label for="password">Пароль:</label>
  <input type="password" id="password" required>
  
  <button type="submit">Зареєструватися</button>
</form>

Ми можемо використати метод focus() для автоматичного встановлення фокусу на перше поле введення після завантаження сторінки:

window.addEventListener('load', () => {
  const nameField = document.getElementById('name');
  nameField.focus();
});

Крім того, можна додати обробник події submit для форми, щоб перевірити коректність введених даних і встановити фокус на перше некоректне поле:

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Запобігти відправленню форми

  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value.trim();

  if (!name) {
    document.getElementById('name').focus();
    return;
  }

  if (!isValidEmail(email)) {
    document.getElementById('email').focus();
    return;
  }

  if (password.length < 8) {
    document.getElementById('password').focus();
    return;
  }

  // Якщо всі дані коректні, можна відправляти форму
  form.submit();
});

У цьому прикладі ми використовуємо метод focus() для встановлення фокусу на перше некоректне поле введення. Якщо ім'я порожнє, фокус встановлюється на поле name. Якщо електронна пошта некоректна, фокус встановлюється на поле email. Якщо пароль занадто короткий, фокус встановлюється на поле password. Така поведінка допомагає користувачам легко ідентифікувати і виправити некоректні дані.

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

Синтаксис

focus()
focus(options)

Параметри

options

Логічне значення, яке вказує, чи потрібно запобігати прокручуванню сторінки для фокусованого елемента. За замовчуванням false.

Наприклад:

const inputField = document.getElementById('myInput');
inputField.focus({ preventScroll: true });

У цьому випадку фокус буде встановлено на inputField, але сторінка не буде прокручуватися, щоб показати цей елемент, якщо він знаходиться поза видимою областю.

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<input type="text" id="myInput">
<button id="focusButton">Фокус на поле введення</button>

<script>
const inputField = document.getElementById('myInput');
const button = document.getElementById('focusButton');

button.addEventListener('click', () => {
  inputField.focus(); // Встановлення фокусу на поле введення
});
</script>

<form id="registrationForm">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" required>

  <label for="email">Електронна пошта:</label>
  <input type="email" id="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" required>

  <button type="submit">Зареєструватися</button>
</form>

<script>
// Встановлення фокусу на перше поле введення після завантаження сторінки
window.addEventListener('load', () => {
  document.getElementById('name').focus();
});

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Запобігання відправленню форми

  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value.trim();

  if (!name) {
    document.getElementById('name').focus(); // Фокус на поле "Ім'я", якщо воно порожнє
    return;
  }

  if (!isValidEmail(email)) {
    document.getElementById('email').focus(); // Фокус на поле "Електронна пошта", якщо воно некоректне
    return;
  }

  if (password.length < 8) {
    document.getElementById('password').focus(); // Фокус на поле "Пароль", якщо воно занадто коротке
    return;
  }

  // Якщо всі дані коректні, можна відправляти форму
  form.submit();
});
</script>