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() для покращення доступності веб-додатків. Встановлюючи фокус на перший інтерактивний елемент після завантаження сторінки, ви забезпечуєте зручність для користувачів, які покладаються на клавіатуру для навігації. Наприклад, document.querySelector('input').focus(); встановить фокус на перше поле введення на сторінці.

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

Порада

Комбінуйте метод focus() з обробниками подій для створення інтуїтивного інтерфейсу. Наприклад, після натискання кнопки можна встановити фокус на певне поле введення: button.addEventListener('click', () => { inputField.focus(); });

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

Порада

Використовуйте метод focus() для полегшення процесу введення даних у формах. Після успішної валідації одного поля введення встановлюйте фокус на наступне поле: if (isValid(field1.value)) { field2.focus(); } Це допоможе користувачам швидше заповнювати форму.

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

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

Синтаксис

focus()
focus(options)

Параметри

options

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

Наприклад:

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

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

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1.5	3	8	12	5.5

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

Переглядач
	4.4	18	4	1

Приклади

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

<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>