まくまくHTML/CSSノート
入力フォームに自動的にフォーカスする（autofocus 属性）
下記の例では、３番目の input 要素に autofocus 属性を指定しているので、デフォルトでその要素にフォーカスが当たるようになります。
<form>
<label>日付: <input type="date"></label><br>
<label>時間: <input type="time"></label><br>
<label>メール: <input type="email" autofocus></label><br>
<label>電話番号: <input type="tel"></label><br>
<label>URL: <input type="url"></label><br>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</form>
autofocus 属性には値を指定する必要はありません。
タグの中に単純に autofocus とだけ記述しておくだけで OK です。
次のようにすれば、JavaScript で任意の HTML 要素にフォーカスを移動させることができます。
// 画面が表示されたら sample という id を持つ要素をフォーカス
window.addEventListener('load', () => {
const elem = document.getElementById('sample');
elem.focus();
});
基本は HTML 要素の autofocus 属性を使えばいいのですが、画面内に初期フォーカスを与えたい要素の候補が複数ある場合などに使えるかもしれません。
