【HTML Living Standard】autofocus属性の使い方

autofocusプロパティは、ページの読み込み時やダイアログが表示された際に、特定のHTML要素に自動的にフォーカスを当てるかどうかを制御する真偽値の属性値を保持するプロパティです。フォーカスとは、キーボード入力や操作の対象となる状態を指します。

このプロパティを要素に設定すると、ユーザーがウェブページを開いた直後や、dialog要素によってモーダルウィンドウなどが表示された瞬間に、指定した入力フィールドやボタンなどの操作可能な要素に自動的にカーソルが移動します。これにより、ユーザーはすぐに目的の入力や操作を始められ、フォーム利用の利便性が向上します。例えば、検索サイトの検索ボックスやログインフォームのユーザー名入力欄にこのプロパティを設定することで、ユーザーはすぐに文字入力を開始できます。

autofocusプロパティは、主にinput、select、textarea、button、そしてdialogといったフォーム関連の要素で利用できます。このプロパティは真偽値属性であるため、属性が存在するだけで有効になり、特定の値を設定する必要はありません。

使用上の注意点として、一つのHTMLドキュメント内でautofocusを設定できる要素は一つだけです。複数の要素に設定した場合、どの要素にフォーカスが当たるかはブラウザの挙動に依存し、予期せぬ結果となる可能性があります。また、自動フォーカスはアクセシビリティの観点から慎重な検討が必要です。ページのスクロールが必要な位置に設定すると、スクリーンリーダー利用者などが初期コンテンツを見逃す原因となる場合があるため、ユーザーエクスペリエンス全体を考慮し、適切に使用することが重要です。

Copy
1<input type="text" autofocus>

引数なし

引数はありません

戻り値なし

戻り値はありません