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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

focus()
focus(options)

Параметри

options

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

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

автор: Bond

правити

Повернення

none

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

автор: Bond

правити

Переглядачі

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

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

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

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

Переглядач
	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();