Focus: примеры (JAVASCRIPT)

Примеры базового применения

Фокусировка на текстовом поле после загрузки страницы:

<input type='text' id='username' placeholder='Введите имя'>
<script>
  document.getElementById('username').focus();
</script>

// Курсор ввода появляется внутри текстового поля.

Использование параметра preventScroll:

// Элемент находится вне видимой области.
document.querySelector('#footer-input').focus({ preventScroll: true });

// Элемент получает фокус, но страница не прокручивается к нему.

Фокусировка на элементе с атрибутом tabindex:

<div id='customDiv' tabindex='-1'>Нажмите Tab</div>
<script>
  document.getElementById('customDiv').focus();
</script>

// Див получает фокус, вокруг него появляется контур (outline).

Похожие методы в JavaScript

blur() — противоположный метод, который удаляет фокус с элемента. Часто используется для скрытия виртуальной клавиатуры на мобильных устройствах или сброса состояния.

element.select() — метод для элементов форм ввода (<input>, <textarea>). Он не только фокусирует элемент, но и выделяет весь его текстовый контент, что удобно для быстрого редактирования.

autofocus — HTML-атрибут булевого типа. Автоматически фокусирует элемент при загрузке страницы. Использование атрибута предпочтительнее для начальной фокусировки, так как оно более декларативно.

Выбор метода зависит от задачи: focus() даёт программный контроль, autofocus подходит для статической разметки, а select() полезен для полей с текстом.

Аналоги в других языках программирования

В других экосистемах управление фокусом обычно связано с GUI-фреймворками.

Python (Tkinter): Используется метод focus() или focus_set() для виджетов.

import tkinter as tk
root = tk.Tk()
text_entry = tk.Entry(root)
text_entry.pack()
text_entry.focus_set() # Установка фокуса
root.mainloop()

C# (Windows Forms): У элементов управления есть метод Focus(), возвращающий булево значение, указывающее на успех операции.

// textBox1 - экземпляр TextBox
bool success = textBox1.Focus();

PHP не имеет прямой аналогии, так как это серверный язык, но может генерировать JavaScript-код для установки фокуса на клиенте.

Ключевое отличие JavaScript-реализации — её прямая интеграция в DOM и работа в контексте браузера, в то время как в других языках фокус связан с нативными окнами приложений.

Распространённые ошибки

1. Попытка вызвать focus() для элемента, который не поддерживает фокус в данный момент.

<div id='myDiv'>Простой блок</div>
<script>
  // Элемент div по умолчанию не фокусируемый.
  document.getElementById('myDiv').focus(); // Ничего не произойдет.
</script>

Исправление: добавление атрибута tabindex.

2. Вызов метода для скрытого элемента (например, с display: none).

<input type='text' id='hiddenInput' style='display: none;'>
<script>
  document.getElementById('hiddenInput').focus(); // Игнорируется.
</script>

3. Синхронный вызов focus() сразу после манипуляций, которые скрывают предыдущий сфокусированный элемент, может не сработать из-за порядка событий в цикле рендеринга браузера.

История изменений

Основное изменение произошло с введением параметра options в спецификации WHATWG HTML Living Standard. Ранее метод не принимал аргументов.

Параметр preventScroll был добавлен для точечного контроля над прокруткой страницы. Это особенно полезно в одностраничных приложениях (SPA) и сложных интерфейсах, где автоматическая прокрутка может быть нежелательной.

Старый код без параметров остается полностью работоспособным, обратная совместимость сохранена.

Расширенные примеры использования

Управление фокусом в модальном окне. Фокус захватывается внутри окна и возвращается на предыдущий элемент при закрытии.

let previousActiveElement;
function openModal() {
  previousActiveElement = document.activeElement;
  const modal = document.getElementById('myModal');
  modal.style.display = 'block';
  modal.querySelector('button.close').focus();
}
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
  previousActiveElement.focus();
}

Фокусировка с обработкой состояния в React-компоненте с использованием ref.

import React, { useRef, useEffect } from 'react';
function SearchInput() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <input ref={inputRef} type='search' />;
}

Последовательная фокусировка нескольких полей после асинхронной операции.

async function validateAndMove() {
  const isValid = await validateField(field1.value);
  if (isValid) {
    field1.blur();
    // Небольшая задержка может улучшить восприятие
    setTimeout(() => field2.focus(), 50);
  }
}

Создание виртуальной навигации с клавиатуры в списке.

const items = document.querySelectorAll('.list-item');
let currentIndex = 0;
items[currentIndex].focus();
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    currentIndex = (currentIndex + 1) % items.length;
    items[currentIndex].focus({ preventScroll: false });
  }
});