Autofocus

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} :::