.focus()

Вызов метода focus() на DOM-элементе устанавливает фокус на этот элемент. Когда элемент находится в фокусе, он перехватывает и обрабатывает события клавиатуры.

Фокус нельзя поставить на элемент, если он заблокирован. Например, если у кнопки или поля ввода стоит атрибут disabled.

Метод focus() обычно вызывается без аргументов, но в него также можно передать объект со свойством preventScroll:

        
          
          element.focus()element.focus({ preventScroll: true })
          element.focus()
element.focus({ preventScroll: true })

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По умолчанию браузер прокручивает страницу до элемента, на который перемещён фокус. Это так же происходит, если preventScroll установлен в false. Если preventScroll установлен в true, то прокрутки страницы к элементу не произойдёт.

Представим, что мы работаем с веб-страницей с формой:

        
          
          <form action="/apply" method="POST">  <label>    Your name:    <input type="text" name="name">  </label>  <label>    Email:    <input type="email" name="email" id="email">  </label>  <button type="submit">Подать заявку</button></form>
          <form action="/apply" method="POST">
  <label>
    Your name:
    <input type="text" name="name">
  </label>

  <label>
    Email:
    <input type="email" name="email" id="email">
  </label>

  <button type="submit">Подать заявку</button>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы программно установить фокус в поле Email нужно получить искомый элемент и вызвать метод focus() на нём:

        
          
          const emailInput = document.getElementById('email')emailInput.focus()
          const emailInput = document.getElementById('email')
emailInput.focus()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

После выполнения кода поле станет доступно для ввода.

В примере фокус перемещается в зависимости от выбранного элемента в выпадающем списке:

Фокус в вебе — это обозначение активного элемента на странице. Такой элемент браузеры чаще всего обозначают голубой полупрозрачной обводкой. С активным элементом можно взаимодействовать, он принимает события клавиатуры. Например, когда мы печатаем значение в поле ввода, это поле ввода находится в фокусе.

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

На фокус можно влиять с помощью HTML-атрибутов autofocus и tabindex, а также из JavaScript с помощью вызова методов focus() и blur() у DOM-элементов.

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

Бывают случаи, когда нужно программно установить фокус на элемент:

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

Эти случаи объединяет необходимость перемещать фокус непоследовательно, не так, как браузер делает по умолчанию. Произвольно переместить фокус позволяет метод focus().

Например, в случае с открытием модального окна нужно переместить фокус на него. Подпишемся на событие click на кнопке открытия окна и вызовем focus() в обработчике:

        
          
          const openModalButton = document.getElementById('open-modal-button')const modalWindow = document.getElementById('modal-window')openModalButton.addEventListener('click', function(event) {  modalWindow.focus()})
          const openModalButton = document.getElementById('open-modal-button')
const modalWindow = document.getElementById('modal-window')
openModalButton.addEventListener('click', function(event) {
  modalWindow.focus()
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Полный пример реализации модального окна описан в WAI-ARIA Authoring Practices.

Фокус — это обозначение активного элемента на странице, но не все элементы могут иметь фокус. Обычно фокус можно выставить интерактивным элементам, с которыми можно взаимодействовать с клавиатуры.

В спецификации HTML описаны все критерии, которые делают элемент доступным для фокуса. Мы же разберём самые важные.

Если не устанавливать атрибуты, которые влияют на доступность элемента для фокуса, то каждый браузер самостоятельно определяет, какой элемент может иметь фокус. Во всех современных браузерах, следующие элементы могут иметь фокус:

• ссылки <a> с установленным атрибутом href;
• кнопки <button>;
• поля ввода <input>, кроме скрытых (type="hidden");
• выпадающие списки <select>;
• поля многостраничного ввода textarea;
• элементы <summary>;
• произвольный элемент, если у него установлен атрибут tabindex.

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

        
          
          <form action="/apply" method="POST">  <label>    Your name:    <input type="text" name="name" autofocus>  </label>  <label>    Email:    <input type="email" name="email">  </label>  <button type="submit">Подать заявку</button></form>
          <form action="/apply" method="POST">
  <label>
    Your name:
    <input type="text" name="name" autofocus>
  </label>

  <label>
    Email:
    <input type="email" name="email">
  </label>

  <button type="submit">Подать заявку</button>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать