Метод HTMLElement: focus()

Метод HTMLElement.focus() устанавливает фокус на указанный элемент, если это возможно. Элемент с фокусом — это элемент, который по умолчанию будет получать события клавиатуры и аналогичные события.

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

options Необязательный

Необязательный объект для управления аспектами процесса установки фокуса. Этот объект может содержать следующие свойства:

preventScroll Необязательный

Булево значение, указывающее, будет ли браузер прокручивать документ, чтобы вывести новый элемент с фокусом в область видимости. Значение false для preventScroll (по умолчанию) означает, что браузер прокрутит элемент в область видимости после установки фокуса. Если preventScroll установлено в true, прокрутка не будет выполнена.

focusVisible Необязательный Экспериментальный

Булево значение, которое должно быть установлено в true для принудительного отображения или в false для предотвращения визуального подтверждения фокуса на элементе. Если свойство не указано, браузер отобразит визуальное подтверждение, если посчитает, что это улучшит доступность для пользователей.

Ничего (undefined).

В этом примере кнопка устанавливает фокус на поле ввода текста.

HTML

<input id="myTextField" value="Text field." />
<button id="focusButton">Click to set focus on the text field</button>

JavaScript

Код ниже добавляет обработчик событий, который устанавливает фокус на поле ввода текста при нажатии на кнопку. Обратите внимание, что большинство браузеров автоматически добавляют визуальное подтверждение (кольцо фокуса) для поля ввода с фокусом, поэтому код не устанавливает focusVisible в true.

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myTextField").focus();
});

Результат

Нажмите на кнопку, чтобы установить фокус на поле ввода.

В этом примере показано, как установить фокус на элемент кнопки.

HTML

Сначала определяются три кнопки. Средняя и правая кнопки установят фокус на левую кнопку. Правая кнопка также укажет focusVisible.

<button id="myButton">Button</button>
<button id="focusButton">Click to set focus on "Button"</button>
<button id="focusButtonVisibleIndication">
  Click to set focus and focusVisible on "Button"
</button>

JavaScript

Код ниже настраивает обработчики событий клика для средней и правой кнопок.

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myButton").focus();
});

document
  .getElementById("focusButtonVisibleIndication")
  .addEventListener("click", () => {
    document.getElementById("myButton").focus({ focusVisible: true });
  });

Результат

Нажмите на среднюю или правую кнопку, чтобы установить фокус на левую кнопку.

Браузеры обычно не отображают визуальное подтверждение фокуса на элементах кнопок при программировании установки фокуса, поэтому эффект от нажатия на среднюю кнопку может быть незаметен. Однако если ваш браузер поддерживает опцию focusVisible, вы должны увидеть изменение фокуса на левой кнопке при нажатии на правую.

В этом примере показано действие установки фокуса с параметром preventScroll установленным в true и false (по умолчанию).

HTML

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

<button id="focus_scroll">Click to set focus on off-screen button</button>
<button id="focus_no_scroll">
  Click to set focus on offscreen button without scrolling
</button>

<div id="container">
  <button id="myButton" style="margin-top: 500px;">Button</button>
</div>

JavaScript

Этот код устанавливает обработчик события клика на первой и второй кнопках для установки фокуса на последнюю кнопку. Обратите внимание, что первый обработчик не указывает опцию preventScroll, поэтому прокрутка к элементу с фокусом будет включена.

document.getElementById("focus_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus(); // default: {preventScroll:false}
});

document.getElementById("focus_no_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus({ preventScroll: true });
});

Результат

Нажмите на первую кнопку, чтобы установить фокус и прокрутить к кнопке, которая находится вне области видимости. Нажатие на вторую кнопку устанавливает фокус, но прокрутка отключена.

• Если вы вызываете HTMLElement.focus() из обработчика события mousedown, вы должны вызвать event.preventDefault() для предотвращения ухода фокуса с элемента HTMLElement
• Поведение фокуса в отношении различных HTML-функций, таких как tabindex или теневой DOM, которые ранее оставались неточными, были обновлены в октябре 2019 года. Дополнительную информацию см. на блог WHATWG .

• HTMLElement.blur для удаления фокуса с элемента.
• document.activeElement для определения текущего элемента с фокусом.