Widely available すべての主要ブラウザで対応済み。安心して使用可能。

autofocus

autofocus グローバル属性は論理属性で、ページ読み込み時、またはその要素が属する <dialog> が表示されたときに、その要素にフォーカスを当てるべきことを示す属性です。

html

<input name="q" autofocus />

文書またはダイアログ内の複数の要素に autofocus 属性を設定することはできません。複数の要素に適用された場合、最初のものにフォーカスが当たります。

メモ: autofocus 属性は、フォームコントロールだけでなく、すべての要素に適用されます。例えば、これは contenteditable の領域で使用されるかもしれません。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
autofocus
79
79
110
15.4
79
16.4
DOM API
autofocus

autofocus は HTMLElement のプロパティで、HTML の autofocus 属性を反映した論理値で、ページが読み込まれた時、または、 dialog 要素やポップオーバー属性が設定された要素の中で指定された場合は、ダイアログやポップオーバーが表示された時に、コントロールにフォーカスを当てるかどうかを表します。
79
79
110
15.4
79
15.4
autofocus

MathMLElement インターフェイスの autofocus プロパティには、autofocus HTML グローバル属性を反映した boolean 値が含まれます。これは、MathML 要素がダイアログやポップオーバーの中にある場合、ページがロードされた時、または要素が表示された時に MathML 要素にフォーカスを当てるかどうかを示します。
109
109
110
15.4
109
15.4
autofocus

SVGElement インターフェースの autofocus プロパティは autofocus HTML global 属性を反映した boolean 値を持つ。それは SVG 要素がダイアログやポップオーバーの中にある場合、ページがロードされた時、あるいは要素が表示された時に SVG 要素に焦点を合わせるべきかどうかを示す。
79
79
110
15.4
79
15.4
その他
svg.global_attributes.autofocus

autofocus global SVG 属性は、フォーカス可能な要素が文書に連結された後にフォーカスされるように定義する。この属性は、要素が既にフォーカス可能でない場合は何の効果もない。
79
79
110
15.4
79
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • <button>`、`<input>`、`<select>`、`<textarea>` 要素をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • <button>`、`<input>`、`<select>`、`<textarea>` 要素をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (110)
実装メモ
  • <button>`、`<input>`、`<select>`、`<textarea>` 要素をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
実装メモ
  • <button>`、`<input>`、`<select>`、`<textarea>` 要素をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • <button>`、`<input>`、`<select>`、`<textarea>` 要素をサポートする。
注釈 1件
実装メモ
  • ハードウェアキーボードが接続されていない場合、`autofocus` 属性は何の効果も持ちません（例えば、`focus` イベントは発生せず、要素は `:focus` セレクタにマッチしません）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (110)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15.4)
実装メモ
  • HTMLButtonElement`, `HTMLInputElement`, `HTMLSelectElement`, `HTMLTextAreaElement` をサポートする。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (110)
実装メモ
  • SVGGraphicsElement` でのみサポートされる。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (110)
実装メモ
  • SVGGraphicsElement` でのみサポートされる。

基本構文

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

ライブデモ

Autofocus

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

プレビュー全画面表示

Searchform. autofocus

Searchpe-j in input field to autofocuspattern.

プレビュー全画面表示

autofocus Key Considerations

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

プレビュー全画面表示

実務での使いどころ

  • autofocus の活用

    autofocus グローバル属性は論理属性で、ページ読み込み時、またはその要素が属する <dialog> が表示されたときに、その要素にフォーカスを当てるべきことを示す属性です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク