Widely availableUseful in narrow, single-purpose contexts such as search pages or login dialogs. Use sparingly elsewhere.
Forms Widely available

autofocus

The autofocus attribute moves focus to an element when the page or dialog finishes loading. It can speed up task entry, but it also changes the user's starting context immediately.

FormsFocusInput

Overview

The autofocus attribute moves focus to an element when the page or dialog finishes loading. It can speed up task entry, but it also changes the user's starting context immediately.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
autofocus
79
79
110
15.4
79
16.4
DOM API
autofocus

The autofocus property of the HTMLElement interface represents a boolean value reflecting the autofocus HTML global attribute. This indicates whether the element should be focused on page load or, if it is nested inside a dialog or popover element, when the or popover is shown.
79
79
110
15.4
79
15.4
autofocus

The autofocus property of the MathMLElement interface contains a boolean value reflecting the autofocus HTML global attribute. It indicates whether the MathML element should be focused when the page loads or when the element becomes shown if the MathML element is inside a dialog or a popover.
109
109
110
15.4
109
15.4
autofocus

The autofocus property of the SVGElement interface contains a boolean value reflecting the autofocus HTML global attribute. It indicates whether the SVG element should be focused when the page loads or when the element becomes shown if the SVG element is inside a dialog or a popover.
79
79
110
15.4
79
15.4
Other
svg.global_attributes.autofocus

The autofocus global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable.
79
79
110
15.4
79
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for the `<button>`, `<input>`, `<select>`, and `<textarea>` elements.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for the `<button>`, `<input>`, `<select>`, and `<textarea>` elements.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (110)
Implementation note
  • Supported for the `<button>`, `<input>`, `<select>`, and `<textarea>` elements.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • Supported for the `<button>`, `<input>`, `<select>`, and `<textarea>` elements.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for the `<button>`, `<input>`, `<select>`, and `<textarea>` elements.
Notes 1 item(s)
Implementation note
  • If there's no hardware keyboard connected, then the `autofocus` attribute has no effect (for example, the `focus` event doesn't fire and the element does not match the `:focus` selector).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (110)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • Supported for `HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, and `HTMLTextAreaElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (110)
Implementation note
  • Only supported on `SVGGraphicsElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (110)
Implementation note
  • Only supported on `SVGGraphicsElement`.

Syntax

HTML 
<form>
  <label>Search: <input type="search" autofocus placeholder="キーワード"></label>
  <button type="submit">Search</button>
</form>

Live demo

Autofocus

Autofocus attribute in pe-jwhen the page loads to automaticallyfocus settings.

PreviewFullscreen

Searchform. autofocus

Searchpe-j in input field to autofocuspattern.

PreviewFullscreen

autofocus Key Considerations

Autofocus is pe-j to 1 onlyusage.akseshiriti. to note.

PreviewFullscreen

Use cases

  • Search-first pages

    A dedicated search screen can place focus directly into the search field so users can begin typing immediately.

  • Login entry points

    In a compact sign-in dialog, focusing the first field can reduce friction when the user's next step is obvious.

Cautions

  • Unexpected focus movement can disorient screen reader and keyboard users, especially on long pages.
  • Only one element should use autofocus in a given view, and the chosen target should match the primary task.

Accessibility

  • If autofocus is used, make the page purpose obvious so users understand why focus moved immediately.
  • Avoid autofocus when it skips over important context or instructions the user needs first.

Related links

Powered by web-features