VanillaJavaScriptを使用して最初のフォーム入力フィールドに自動フォーカスする方法

HTMLフォームのページ読み込みで最初の入力フィールドにオートフォーカスする方法を学ぶ

優れたUXデザインの基本的な前提の1つは、ユーザーが必要なものをすばやく取得できるように、aからbに到達するためのステップをできるだけ多く節約することです。

フォーム、特に長いフォームへの入力を楽しむ人は誰もいないので、ページの読み込み時にHTMLフォームの最初の入力フィールドにオートフォーカスを設定して、ユーザーの時間を少し節約しましょう。

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

このJavaScriptonload関数を.jsファイルに追加します：

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

ページロードデモのオートフォーカス入力フィールド

以下のデモをご覧ください：

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

コードの仕組み

HTMLフォームを見てください。 HTMLフォームの最初の入力フィールドのIDは、firstFieldと呼ばれます。 —これがJavaScriptでターゲットにしているものです。

JavaScriptでは、window.onloadというonloadイベントを設定します これは、新しいページに移動したり、ブラウザを更新したりするとすぐに実行されます。

onloadイベントは、firstFieldで入力フィールドを見つける関数を実行します document.getElementByIdによるID 次に、JavaScriptのfocus()を使用します 状態を設定するメソッド フォーカスする入力フィールドの。

トラブルシューティング

フォーカスのアウトラインが突然入力フィールドから消えますか？これは、作成したコードが最初の入力フィールドに1回だけ自動フォーカスするためです。 各ページの読み込み時に。オートフォーカス入力フィールド内にすぐに入力する以外のことを行うと、別のページを更新するまで、オートフォーカスは再度行われません。