JavaScript | デフォルトでフォーカスするフォームを指定する方法

JavaScript,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();