Атрибут autofocus

Атрибут autofocus позволяет автоматически установить фокус на элемент. Это особенно полезно в формах, где важно сразу начать ввод данных без лишних кликов.

        
          
          <input name="name" autofocus>
          <input name="name" autofocus>

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

Атрибут autofocus булевый: его присутствие означает true, а отсутствие — false. Чаще его применяют к интерактивным тегам, например, <input>, <button>, <select>, <textarea>.

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

Обратите внимание, что автофокус не будет применён к элементам <input> с типом hidden, потому что скрытые поля не могут получать фокус.

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

Фокус на элементе с атрибутом autofocus установится сразу после загрузки страницы. Фокус означает, что управление передаётся этому элементу. Например, поле ввода <input> становится активным, и пользователь может сразу вводить текст без дополнительного клика.

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

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

Особую проблему это создаёт на мобильных устройствах: пользователь скринридера не увидит контекста вокруг поля с автофокусом — ему будет доступен только label этого поля. В таком случае поможет атрибут aria-describedby.

        
          
          <div  role="alertdialog"  aria-labelledby="unicorn_title"  aria-describedby="unicorn_warning">  <h2 id="unicorn_title">    Осторожно, волшебство!  </h2>  <p id="unicorn_warning">    Если ты отпустишь этого единорога,    он ускачет и вернуть его уже не получится!  </p>  <button autofocus>    Обнять и не отпускать  </button>  <button>    Отпустить в закат  </button></div>
          <div
  role="alertdialog"
  aria-labelledby="unicorn_title"
  aria-describedby="unicorn_warning"
>
  <h2 id="unicorn_title">
    Осторожно, волшебство!
  </h2>
  <p id="unicorn_warning">
    Если ты отпустишь этого единорога,
    он ускачет и вернуть его уже не получится!
  </p>
  <button autofocus>
    Обнять и не отпускать
  </button>
  <button>
    Отпустить в закат
  </button>
</div>

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

Скринридер озвучит это примерно так: «Осторожно, волшебство!, диалоговое окно с оповещением. Если ты отпустишь этого единорога, он ускачет и вернуть его уже не получится! Обнять и не отпускать, кнопка.»

💡 Атрибут autofocus можно применять к любым элементам с возможностью редактирования. Чтобы элемент получил такое свойство, ему нужно проставить атрибут contenteditable.