Глобальный атрибут autofocus

Глобальный атрибут autofocus указывает, что на элемент будет наведён фокус сразу после загрузки страницы.

Если атрибут autofocus указан для элемента, расположенного внутри элемента <dialog> или внутри элементов, для которых установлен атрибут popover, тогда фокус будет наведён в тот момент, когда диалоговое или всплывающее окно отобразится.

В HTML-документе или диалоговом окне атрибут autofocus должен быть указан не более чем у одного элемента. Если атрибут применить к нескольким элементам, фокус получит первый из них.

Использование данного атрибута для элементов ввода позволяет пользователю сразу начать печатать, без необходимости вручную переводить фокус на элемент.

Синтаксис

<элемент autofocus>

Значения

У этого атрибута нет значений.

Значение по умолчанию

Нет.

Пример

JavaScript-код в примере используется, чтобы атрибут сработал только при клике, а не сразу при открытии страницы.

let openButton = document.getElementById("open");
let cancelButton = document.getElementById("cancel");
let opDialog = document.getElementById("opDialog");

openButton.addEventListener("click", function () {
opDialog.showModal();
});

cancelButton.addEventListener("click", function () {
opDialog.close();
});

<dialog id="opDialog">
  <label>Введите имя: <input type="text" autofocus></label>
  <button id="cancel" type="reset">Отмена</button>
</dialog>

<button id="open">Открыть</button>

Результат