JS метод Object.focus()

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

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

Синтаксис

focus()
focus(options)

Параметри

options

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

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

Return

none

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

Переглядачі

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

Приклади

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

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

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

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

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