Какие особенности работы focus?

Особенности работы с focus в веб-разработке

Focus — это состояние элемента интерфейса, которое указывает на его активность и готовность к взаимодействию (например, ввод текста или нажатие клавиш). Управление фокусом является критически важным для доступности, usability и интерактивности веб-приложений.

Основные механизмы управления фокусом

1. Нативный focus браузера

Элементы получают фокус автоматически при клике или переходе по Tab. Поддерживаются основные элементы: <input>, <button>, <a> (с href), <textarea>, <select>.

<input type="text" id="name" placeholder="Введите имя">
<!-- Элемент получит фокус при клике или Tab -->

2. Программное управление через JavaScript

Можно управлять фокусом динамически с помощью метода .focus().

const button = document.getElementById('submitBtn');
button.focus(); // Устанавливает фокус на элемент

// Удаление фокуса
button.blur();

// Проверка наличия фокуса
if (document.activeElement === button) {
  console.log('Элемент в фокусе');
}

3. Атрибут tabindex

Позволяет контролировать порядок перехода по Tab и добавлять фокус на обычно не фокусируемые элементы (div, span).

<div tabindex="0">Этот div теперь может получить фокус</div>
<!-- tabindex="0": элемент в естественном порядке -->
<!-- tabindex="-1": элемент может получить фокус только программно -->
<!-- tabindex="1+": явный порядок (не рекомендуется) -->

Ключевые особенности и проблемы

Цикл фокуса и доступность

• Порядок определяется tabindex и естественной последовательностью DOM.
• Важно сохранять логичный порядок для пользователей клавиатуры.
• document.activeElement всегда ссылается на текущий элемент с фокусом.

События focus и blur

Эти события позволяют отслеживать и реагировать на изменения состояния фокуса.

input.addEventListener('focus', (event) => {
  event.target.classList.add('highlighted');
});

input.addEventListener('blur', (event) => {
  // Проверка валидации при потере фокуса
  if (!event.target.value) {
    showError('Поле обязательное');
  }
});

Проблемы с динамическими элементами

• Элементы, добавленные динамически (например, через innerHTML), не получают фокус автоматически.
• Решение: программное управление после рендеринга.

// После добавления нового поля в форму
const newInput = document.createElement('input');
form.appendChild(newInput);
newInput.focus(); // Установить фокус

Фокус в модальных окнах и попапах

Критически важно для доступности:

• При открытии модалки фокус должен перемещаться внутрь.
• При закрытии — возвращаться на предыдущий активный элемент.
• Запрещать фокус на элементах вне модалки (техника focus trapping).

function openModal() {
  modal.show();
  modal.querySelector('.close-btn').focus();
  // Trap focus внутри modal
  modal.addEventListener('keydown', trapFocus);
}

Фокус и CSS-стилизация

Стилизация через :focus и :focus-visible:

• :focus применяется всегда при фокусе.
• :focus-visible — только когда фокус логичен (клавиатура, не клик).

input:focus {
  outline: 2px solid blue;
}

button:focus-visible {
  /* Стиль только для клавиатурного фокуса */
  box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}

Best practices и рекомендации

1. Не нарушайте естественный порядок Tab — избегайте положительных tabindex.
2. Управляйте фокусом в динамических интерфейсах — после AJAX, рендера новых элементов.
3. Всегда предоставляйте визуальный индикатор фокуса для usability.
4. Тестируйте с клавиатурой — убедитесь, что весь интерфейс доступен без мыши.
5. Возвращайте фокус при закрытии модальных окон — критично для доступности (WCAG).
6. Избегайте нескольких элементов в фокусе — document.activeElement всегда один.

Особые случаи и современные API

Focus в Shadow DOM

В компонентах с Shadow DOM фокус может быть захвачен внутри shadow tree, что требует особого управления.

API Focus Event и relatedTarget

В событии focusout можно получить следующий элемент, который получит фокус.

element.addEventListener('focusout', (event) => {
  console.log('Фокус уходит на:', event.relatedTarget);
});

Управление фокусом — это не просто техническая деталь, а фундаментальная часть создания инклюзивных, доступных и удобных интерфейсов. Правильная работа с фокусом напрямую влияет на пользовательский опыт, особенно для людей, использующих клавиатуру или assistive technologies.