HTML-атрибут autofocus
На этой странице — информация об HTML-атрибуте autofocus, его синтаксис, применимые элементы и примеры использования.
HTML-атрибут autofocus — это boolean-атрибут, который указывает браузеру автоматически переместить фокус клавиатуры на элемент сразу после загрузки страницы (или содержащего диалога). Пользователь может сразу начать вводить текст или взаимодействовать с этим элементом, не кликая по нему и не переходя к нему с помощью клавиши Tab.
Атрибут autofocus был введён в HTML5 и сейчас поддерживается всеми современными браузерами (Chrome, Firefox, Safari и Edge реализовали его широко примерно с 2020 года).
На этой странице рассматриваются синтаксис, применимые элементы, наиболее распространённый современный сценарий использования (элемент <dialog>), а также компромиссы с точки зрения доступности, которые следует взвесить перед применением атрибута.
Синтаксис
autofocus — это boolean-атрибут, поэтому для его активации достаточно просто указать его — значение не требуется.
<input autofocus>| Применяется к | Любому фокусируемому HTML-элементу. Чаще всего используется с элементами управления форм: <input>, <button>, <select> и <textarea>. Элемент <dialog>, открытый с помощью showModal(), а также открытый элемент <details> также участвуют в обработке autofocus. |
|---|
Только один autofocus на документ
Атрибут autofocus может быть установлен только на одном элементе в документе. Если вы добавите его к нескольким элементам, браузеры применят его к первому элементу с этим атрибутом в порядке следования в документе, а остальные проигнорируют. Таким образом, с помощью autofocus нельзя одновременно сфокусироваться на нескольких полях — фокус по определению является единственной точкой.
Базовый пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>Example of the HTML "autofocus" attribute.</h1>
<form action="#">
Name: <input type="text" name="fname" autofocus /><br />
Surname: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
</body>
</html>При загрузке страницы поле «Name» получит фокус, и курсор будет мигать в нём, готовый к вводу.
Autofocus на других элементах
autofocus не ограничен текстовыми полями. Он работает с любым фокусируемым элементом управления. Браузер фокусирует элемент: для <select> или <button> это означает, что элемент выделяется и готов к работе с клавиатурой, а для <textarea> курсор помещается внутрь него.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autofocus on different controls</title>
</head>
<body>
<!-- A button can receive autofocus -->
<button type="button" autofocus>Start here</button>
<!-- A select can receive autofocus -->
<label>Country:
<select name="country">
<option>United States</option>
<option>Germany</option>
<option>France</option>
</select>
</label>
<!-- A textarea can receive autofocus -->
<label>Message:
<textarea name="message" rows="4"></textarea>
</label>
</body>
</html>Помните о правиле единственного autofocus: фокус получит только элемент <button>, так как он является первым элементом с данным атрибутом.
Autofocus в элементе <dialog> (наиболее распространённый современный случай)
Наиболее обоснованное применение autofocus — внутри модального <dialog>. Когда пользователь намеренно открывает диалог, перемещение фокуса на первый соответствующий элемент управления внутри него является ожидаемым поведением — это удерживает пользователя клавиатуры внутри диалога и готовит его к действию.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog with autofocus</title>
</head>
<body>
<button id="openBtn">Open dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>
<label>Your name:
<input type="text" name="name" autofocus />
</label>
</p>
<button value="ok">OK</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openBtn")
.addEventListener("click", () => dialog.showModal());
</script>
</body>
</html>Поскольку диалог открывается в ответ на действие пользователя, перемещение фокуса в него не вызывает дезориентации — это именно то, о чём просил пользователь. Вот почему использование autofocus на элементе управления в диалоге гораздо безопаснее, чем autofocus на поле только что загруженной страницы.
Когда (и когда не) использовать autofocus
Autofocus экономит один клик и указывает, с чего начать, однако при этом перехватывает управление клавиатурой у пользователя. Используйте его, когда:
- Страница или представление существуют исключительно для этого одного элемента ввода — специальная страница поиска, экран входа или шаг с единственным вопросом.
- Фокус перемещается в ответ на действие пользователя, например при открытии модального
<dialog>.
Избегайте его, когда:
- Элемент расположен ниже видимой области или в середине страницы с большим объёмом контента. Фокусирование на нём вынуждает браузер прокручивать страницу, что неприятно и пропускает содержимое выше.
- На странице есть значимый контент, который пользователь должен прочитать в первую очередь (например, статья с полем для комментариев). Автофокус на поле комментария «перебрасывает» читателя мимо статьи.
Вопросы доступности
autofocus непосредственно влияет на пользователей вспомогательных технологий, поэтому обращайтесь с ним осторожно.
- Нарушение работы программ чтения с экрана. Программы чтения с экрана обычно начинают читать с верхней части документа. Когда фокус принудительно перемещается на элемент в середине страницы, программа чтения может сразу перейти к этому элементу, молча пропустив заголовок, навигацию и вводную часть — пользователь оказывается «в середине страницы» без контекста о том, где он находится.
- WCAG 2.4.3 (Порядок фокуса). Этот критерий успеха требует, чтобы порядок фокуса сохранял смысл и работоспособность. Перемещение фокуса на произвольный элемент управления при загрузке может нарушить ожидаемый пользователем порядок чтения и навигации клавишей Tab. Ограничьте использование autofocus случаями, когда фокусируемый элемент действительно является логической отправной точкой.
- Неожиданная смена контекста. Внезапное перемещение фокуса и прокрутка области просмотра могут дезориентировать пользователей с когнитивными нарушениями или слабым зрением, которые могут не заметить, что страница переместилась.
Практическое правило: используйте autofocus для элемента только тогда, когда его фокусирование не прокручивает страницу и когда этот элемент однозначно является первым, с чего пользователь хочет начать.
Особенности на мобильных устройствах
Некоторые мобильные браузеры намеренно игнорируют autofocus при загрузке страницы. В iOS mobile Safari не вызывает экранную клавиатуру и не перемещает фокус автоматически при загрузке страницы; Chrome на Android ведёт себя аналогично. Это решение на уровне UX операционной системы: автоматическое открытие виртуальной клавиатуры закрывало бы контент, смещало разметку и удивляло пользователя ещё до того, как он решил что-либо вводить.
Надёжного способа «принудительно активировать» autofocus на этих платформах не существует, а попытки эмулировать его через JavaScript (element.focus() при загрузке) также блокируются, если это не происходит внутри обработчика пользовательского жеста. Рекомендуемый подход — перемещать фокус в ответ на касание — например, вызывать .focus(), когда пользователь открывает диалог или нажимает кнопку «поиск» — что именно и демонстрирует приведённый выше паттерн с диалогом.
Совместимость с браузерами
autofocus является частью живого стандарта HTML и пользуется широкой поддержкой: Chrome, Edge, Firefox и Safari реализовали его много лет назад, а современное поведение (для любого элемента) доступно во всех этих браузерах примерно с 2020 года. Описанное выше ограничение для мобильной клавиатуры является намеренным поведением платформы, а не отсутствием поддержки.