autofocus #
::: section-content
The autofocus
global attribute is a Boolean
attribute indicating that an element should be focused on page load, or
when the
<dialog>
that it is part of is
displayed.
::: code-example [html]{.language-name}
<input name="q" autofocus />
:::
No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
::: {#sect1 .notecard .note}
Note: The autofocus
attribute applies to all elements, not just
form controls. For example, it might be used on a
contenteditable area.
:::
:::
Accessibility considerations #
::: section-content
Automatically focusing a form control can confuse visually-impaired
people using screen-reading technology and people with cognitive
impairments. When autofocus
is assigned, screen-readers "teleport"
their user to the form control without warning them beforehand.
Use careful consideration for accessibility when applying the
autofocus
attribute. Automatically focusing on a control can cause the
page to scroll on load. The focus can also cause dynamic keyboards to
display on some touch devices. While a screen reader will announce the
label of the form control receiving focus, the screen reader will not
announce anything before the label, and the sighted user on a small
device will equally miss the context created by the preceding content.
:::
Specifications #
::: _table #
Specification #
HTML Standard
[#
dom-fe-autofocus]{.small}
:::
Browser compatibility #
::: _table #
Desktop Mobile
Chrome Edge Firefox Internet Opera Safari WebView Chrome Android Firefox for Opera Android Safari on IOS Samsung
Explorer Android Android Internet
autofocus
79 79 1 10 66 4 79 79 4 57 3.2 12.0
1--79 12--79 Supported for Supported for ≤12.1--66 Supported for ≤37--79 18--79 Supported for ≤12.1--57 Supported for 1.0--12.0
the the the the the
Supported for Supported for `<button>`, `<button>`, Supported for `<button>`, Supported for Supported for `<button>`, Supported for `<button>`, Supported for
the the `<input>`, `<input>`, the `<input>`, the the `<input>`, the `<input>`, the
`<button>`, `<button>`, `<select>`, `<select>`, `<button>`, `<select>`, `<button>`, `<button>`, `<select>`, `<button>`, `<select>`, `<button>`,
`<input>`, `<input>`, and and `<input>`, and `<input>`, `<input>`, and `<input>`, and `<input>`,
`<select>`, `<select>`, `<textarea>` `<textarea>` `<select>`, `<textarea>` `<select>`, `<select>`, `<textarea>` `<select>`, `<textarea>` `<select>`,
and and elements. elements. and elements. and and elements. and elements. and
`<textarea>` `<textarea>` `<textarea>` `<textarea>` `<textarea>` `<textarea>` `<textarea>`
elements. elements. elements. elements. elements. elements. elements.
:::
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus{._attribution-link}
:::