バニラJavaScriptでページ読み込み時に最初のフォーム入力フィールドへ自動フォーカスする方法

HTMLフォームのページ読み込み時に、最初の入力フィールドへ自動的にフォーカスを当てる方法を解説します。

優れたUXデザインの基本原則のひとつは、ユーザーが目的のものに素早くたどり着けるよう、AからBまでの手順をできる限り減らすことです。

フォーム入力が好きな人はいません。特に長いフォームは敬遠されがちです。そこで、ページ読み込み時にフォームの最初の入力フィールドへ自動フォーカスを設定し、ユーザーの貴重な時間を少しでも節約しましょう。

HTMLフォーム

以下のフォームコードをHTMLドキュメントに追加してください。

<form>
	First name:<br>
	<input type="text" name="firstname" id="firstField"><br>Last name:<br>
	<input type="text" name="lastname"><br>Country:<br>
	<input type="text" name="lastname">
</form>

JavaScript

次のJavaScriptのonload関数を.jsファイルに追加してください。

window.onload = function() {
  document.getElementById("firstField").focus();
};

ページ読み込み時の自動フォーカスデモ

以下のデモで実際の動作を確認できます。

https://codepen.io/StrengthandFreedom/pen/yLypogQ

コードの仕組み

まずHTMLフォームを見てみましょう。最初の入力フィールドにはfirstFieldというIDが付与されており、これがJavaScriptで操作対象となる要素です。

JavaScript側では、window.onloadというonloadイベントを設定しています。このイベントは、新しいページへ移動したときやブラウザを更新したときに即座に実行されます。

onloadイベントによって実行される関数は、document.getElementByIdを使ってfirstFieldというIDを持つ入力フィールドを検索し、続いてJavaScriptのfocus()メソッドを呼び出すことで、その入力フィールドの状態を「フォーカス済み」に設定します。

トラブルシューティング

入力フィールドからフォーカスのアウトラインが突然消えてしまうことはありませんか？これは、今回のコードが各ページ読み込み時に一度だけ最初の入力フィールドへ自動フォーカスする仕組みになっているためです。自動フォーカスされた入力フィールドにすぐに入力せず、他の操作を行うと、再度ページを更新するまで自動フォーカスは再適用されません。