Как можно расфокусировать элемент без JavaScript?

Способы расфокусировки элемента без JavaScript

Расфокусировка элемента (удаление фокуса) - это операция, которая часто требуется в веб-приложениях для управления пользовательским опытом. Хотя JavaScript предоставляет метод blur(), существуют чистые CSS и HTML подходы для достижения этого без использования JavaScript.

CSS :focus-visible и ::focus-within

Первый подход заключается в использовании CSS-селекторов для управления видимостью фокуса. Селектор :focus-visible применяется когда браузер определяет, что фокус должен быть виден пользователю.

/* Скрывать визуальный индикатор фокуса для мыши */
input:focus:not(:focus-visible) {
  outline: none;
}

/* Показывать фокус для клавиатуры */
input:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

HTML tabindex и autofocus

Второй подход - использование HTML атрибутов для управления порядком табуляции:

<!-- Элемент получит фокус при загрузке страницы -->
<input autofocus type="text" />

<!-- Исключить элемент из потока табуляции -->
<button tabindex="-1">Недостижимо с клавиатуры</button>

<!-- Приоритет в потоке табуляции -->
<input tabindex="1" />
<input tabindex="2" />

CSS contain и inert

Атрибут inert (новый HTML5 стандарт) удаляет элемент из фокусного потока полностью:

<!-- Элемент и все его потомки не получат фокус -->
<div inert>
  <button>Не может получить фокус</button>
  <input type="text" />
</div>

Переоценка фокуса через :target

Можно использовать CSS селектор :target для управления фокусом при переходе по якорям:

<a href="#section1">Перейти</a>
<div id="section1">
  Это содержимое получит визуальный фокус
</div>

#section1:target {
  outline: 3px solid #ff6600;
}

Практический пример для UI

Вот полный пример управления фокусом в форме:

<form>
  <input 
    type="text" 
    placeholder="Поле получит фокус" 
    autofocus
  />
  <button type="submit">Отправить</button>
  <button type="reset" tabindex="-1">Невидимый сброс</button>
</form>

input, button {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

/* Скрыть фокус для мышки */
input:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Когда использовать каждый подход

autofocus: Используй для главного input при загрузке страницы (поиск, модальное окно).

tabindex: Применяй для контроля порядка табуляции в сложных интерфейсах.

inert: Отключай фокус для скрытых элементов, модальных оверлеев.

:focus-visible: Всегда используй для доступности - показывай фокус для клавиатуры, скрывай для мыши.

Эти методы не требуют JavaScript и работают с чистыми HTML/CSS, обеспечивая лучшую производительность и доступность приложения.