JavaScript | デフォルトでフォーカスするフォームを指定する方法
JavaScriptでページが読み込まれた時にデフォルトでフォーカスするHTMLフォームパーツを指定する方法を紹介しています。
フォーカスするフォームを指定する
フォーカスするフォームを指定するJavaScriptのサンプルコードです。
HTMLにはselect要素に3つのoption要素を追加した基本的なセレクトメニュー構造を使っています。
See the Pen JavaScript Get the status of the checkbox by yochans (@yochans) on CodePen.
<form>
<p><input type="text"></p>
<p><input type="text"></p>
<p><input type="text" id="focus"></p>
</form>ページを表示した際に、デフォルトでフォーカスさせるフォームを指定するにはfocus()メゾッドを使います。
指定したいフォームパーツの要素に対して、focus()を適用します。
サンプルではid名に「focus」と付けた3つ目のフォーム要素に対して、focus()を指定しており、ページの読み込み時に自動的にフォーカスさせています。
document.querySelector(`#focus`).focus();