focus() у JavaScript — фокус на полі форми прямо з коду

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

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

Використання focus()

1. Базове використання: Найпростіше використання focus() полягає в наданні фокусу певному елементу при завантаженні сторінки або відповідно до певної події. Це може бути корисним для керування тим, на який елемент слід звернути увагу користувача в першу чергу.

    window.onload = function() {
        document.getElementById("searchInput").focus();
    };
   

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

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

    function validateForm() {
        let inputField = document.getElementById("emailInput");
        if (inputField.value === "") {
            alert("Будь ласка, введіть електронну адресу");
            inputField.focus();
            return false;
        }
        return true;
    }
   

   Тут, якщо поле електронної пошти порожнє, фокус автоматично переходить до цього поля.

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

    function openModal() {
        let modal = document.getElementById("myModal");
        modal.style.display = "block";
        modal.focus();
    }
   

   В цьому випадку при відкритті модального вікна фокус переходить на нього.

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

    document.getElementById("nextButton").onclick = function() {
        document.getElementById("nextInput").focus();
    };
   

   Тут натискання кнопки переміщує фокус на наступне поле вводу.

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

правити

Порада

У односторінкових застосунках (SPA), focus() може бути корисним для керування фокусом при перемиканні між різними частинами застосунку без перезавантаження сторінки.

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

Порада

Пам'ятайте, що не всі елементи можуть отримати фокус. Зазвичай фокус доступний для елементів форм, таких як input, button, а також для посилань і деяких інших елементів. Використання focus() на елементах, які стандартно не підтримують фокус, може не мати ефекту.

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

Порада

Хоча focus() є потужним інструментом, важливо не зловживати ним. Надмірне або неочікуване використання може спричинити плутанину або фрустрацію у користувачів. Використовуйте цей метод обдумано, зберігаючи інтуїтивно зрозумілий інтерфейс.

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

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

Синтаксис

focus()
focus(options)

Параметри

options

Опціональний об'єкт для керування процесом фокусування. Цей об'єкт може містити наступні властивості:

• preventScroll (необов'язковий): Булеве значення, яке вказує, чи слід уникати автоматичної прокрутки, щоб призначити фокус. Встановлення цього параметра в true запобігає прокручуванню до елемента, який отримує фокус.
• preventScrollIntoView (необов'язковий): Булеве значення, яке вказує, чи слід уникати автоматичного переміщення елемента в область видимості при фокусуванні. Встановлення цього параметра в true запобігає переміщенню елемента в область видимості, якщо він не видно в даний момент.

автор: Bond

правити

Повернення

none

Повертає: None (undefined).

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	4

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

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

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

Переглядач
	—

Приклади

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

<input type="text" id="searchInput" value="текст для прикладу" placeholder="Введи щось">

// Визначення елемента за його ID
let searchInput = document.getElementById("searchInput");

// Встановлення фокусу на елемент
searchInput.focus();

<input type="email" id="emailInput" value="[email protected]" placeholder="Введи щось">

// Функція валідації поля вводу
function validateInput() {
    let emailInput = document.getElementById("emailInput");
    if (emailInput.value === "") {
        // Якщо поле email порожнє, встановити на ньому фокус
        emailInput.focus();
        console.log("Введіть адресу електронної пошти.");
    } else {
        // Логіка для обробки правильно заповненого поля
        console.log("Email введено коректно.");
    }
}

// Виклик функції валідації, наприклад, при натисканні на кнопку
validateInput();

<header>
  <h2 class="title">HTMLElement: focus() method</h2>
  <p class="description">Метод focus() встановлює фокус на вказаному елементі.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="myInput" placeholder="Введіть текст">
    <button onclick="setFocus()">Встановити фокус</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

function setFocus() {
  let inputElement = document.getElementById("myInput");
  inputElement.focus();
}
//# sourceURL=pen.js