autofocus HTML global attribute
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
The autofocus global attribute is a Boolean attribute indicating whether the element should be focused on page load or, if it is nested inside a <dialog> or popover element, when the <dialog> or popover is shown.
<input name="q" autofocus />
Only one element inside a document, <dialog> element, or popover may have this attribute specified. If applied to multiple elements, the first focusable one will receive focus.
Note: The autofocus attribute applies to all elements, not just form controls. For example, it might be used on a contenteditable area.
Note: On page load, if a URI fragment identifier is specified and identifies an element, the element with the autofocus attribute does not receive focus via the autofocus attribute. Generally, the element indicated by the fragment receives focus instead.
Accessibility concerns
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
| Specification |
|---|
| HTML> # the-autofocus-attribute> |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
autofocus |
791–79Supported for the<button>, <input>, <select>, and <textarea> elements. |
7912–79Supported for the<button>, <input>, <select>, and <textarea> elements. |
1101–110Supported for the<button>, <input>, <select>, and <textarea> elements. |
66≤12.1–66Supported for the<button>, <input>, <select>, and <textarea> elements. |
15.44–15.4Supported for the<button>, <input>, <select>, and <textarea> elements. |
7918–79Supported for the<button>, <input>, <select>, and <textarea> elements. |
1104–110Supported for the<button>, <input>, <select>, and <textarea> elements. |
57≤12.1–57Supported for the<button>, <input>, <select>, and <textarea> elements. |
16.4If there's no hardware keyboard connected, then theautofocus attribute has no effect (for example, the focus event doesn't fire and the element does not match the :focus selector). |
12.01.0–12.0Supported for the<button>, <input>, <select>, and <textarea> elements. |
794.4–79Supported for the<button>, <input>, <select>, and <textarea> elements. |
16.4If there's no hardware keyboard connected, then theautofocus attribute has no effect (for example, the focus event doesn't fire and the element does not match the :focus selector). |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus
