【HTML】autofocus属性を使って読み込みと同時にボタンを選択状態にする方法

このページについて

このページではHTMLで使えるautofocus属性の機能と使い方を解説しています。

autofocus属性はbuttonタグ/inputタグ/selectタグ/textareaタグの4つで使う事ができる属性です。autofocusはその名の通り、ページの読み込みと同時に各ボタン等を選択状態にするというオートフォーカス機能を持っています。

この属性はブール値で設定します。つまりautofocusと書けばtrueとみなされ、実行されます。逆に書かなかった場合はfalseとして扱われ、実行はされません。

autofocusはそれぞれの対応タグに入れるだけでOKです。

<button autofocus>ボタン</button>

<input autofocus>入力</input>

<select autofocus>選択</select>

<textarea autofocus>テキスト入力エリア</textarea>

こんな感じでそれぞれにautofocusを書き込むだけでOKです。どのタグに対して使うにしても基本機能は全く同じです。

複数にautofocusを指定した場合、当然ながら一番上のautofocusのみが適用されます。

autofocusは特定のタグに付与することで、ページの読み込みと同時にそのボタンや入力エリアを選択状態にする事ができます。一般的なブログでは用途がコメント欄か検索ワードぐらいだと思いますが、Webアプリとかそういうページにおいては便利な存在だと思います。