JavaScript で HTML フォーム要素のフォーカスを設定する

1. JavaScript を使用して入力にフォーカスを設定する
2. JavaScript で Textarea にフォーカスを設定する
3. JavaScript を使用して選択ボックスまたはドロップダウンにフォーカスを設定する

ユーザー入力用のフィールドに焦点を合わせるのは UI / UX 機能であり、フィールドをクリックせずにフィールドに入力し続けることができます。特にフォームが長く、多くの入力フィールドがある場合は、フォームフィールドに動的にフォーカスを適用する必要がある場合があります。フォームフィールドに検証エラーがある場合、そのようなシナリオではユーザーがフィールドを理解するのは困難です。したがって、JavaScript のフィールドにフォーカスを設定し、エラーフィールドを自動的に検証してスクロールすると、エラーがどこにあるかを把握する時間を無駄にするのではなく、ユーザーに直接エラーが示されます。JavaScript には、.focus() メソッドがあります。これらを以下に適用する方法を見てみましょう。

JavaScript を使用して入力にフォーカスを設定する

入力フィールドに焦点を合わせるには、最初にフィールドを選択する必要があります。これを行うにはさまざまな方法があります。次のいずれかの方法を使用できます。

• document.getElementById()：ID に基づいて要素を照会します。通常、ID は一意であるため、getElementById() 関数は要素を一意に返します。同じ ID を持つ要素がさらにある場合は、指定された ID を持つ最初の要素を返します。
• document.getElementsByClassName()：クラス名に基づいて要素を選択します。通常、基準を修飾する要素の配列を返します。
• querySelector()：JavaScript メソッドは、ID、クラス名、または HTML 要素のタグに基づいて要素を選択します。この関数は、パラメーターとして渡された条件を満たす単一の HTML 要素を返します。この記事では、表現を簡単にするために getElementById() 関数を使用します。要素を選択したら、.focus() メソッドを使用して要素にフォーカスを設定できます。以下は、.focus() の構文です。

document.getElementById('input-id').focus();

入力フィールドにフォーカスを設定する

次のコードセットは、ページ読み込み時の入力フィールドに焦点を合わせています。

<input id="username-input" type="text" name="username">

window.onload = function() {
  document.getElementById('username-input').focus();
}

HTML フォームの入力フィールドにフォーカスを設定する

入力要素がフォームの一部である場合、getElementById() を使用して要素をクエリする代わりに、フォーム名の参照を使用できます。使用法の構文は次のとおりです。

document.<Form name>.<Field name>.focus();

たとえば、入力フィールドのあるログインフォームがあるとします。次のコードを適用することで、入力フィールドのフォーカスを設定できます。コードは、ユーザー名入力フィールドにフォーカスを設定します。次のコードが機能するためにフォーム名とフィールド名を使用する際に注意すべきことがいくつかあります。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function() {
  document.LoginForm.UserName.focus();
}

備考

• フォームの入力のフォーカスを設定するときに、名前属性を HTML フォームとターゲットとするフィールドに割り当てる必要があります。名前が指定されていない場合、要素のクエリは困難になります。
• このメソッドは、このメソッドでハイフンを含むタグ名をサポートしていません。したがって、HTML フォームまたは要素に割り当てられる名前は、キャメルケース（UserName など）または小文字（ユーザー名など）のいずれかである必要があります。
• 入力やテキスト領域などの多くのフィールドがある長いフォームの場合、ブラウザがフォーカスされた HTML 要素を自動スクロールして表示するように、scroll 属性を要素に設定することをお勧めします。これは、ユーザーが期待する意図された動作です。そうでなければ、彼はなぜフォームが無効なのか疑問に思うでしょう。

document.getElementById("myButton").focus({preventScroll:false});

JavaScript で Textarea にフォーカスを設定する

.focus() 関数を使用して、フォーカスをテキスト領域に設定できます。通常、テキスト領域にフォーカスするには、document.getElementById("my-text-area").focus() を使用します。これは、入力フィールドで .focus() 関数を使用するのと似ています。HTML フォームタグ内のテキスト領域を使用する場合は、フォーム名の参照をテキスト領域名とともに適用して、それに焦点を合わせることができます。次のコードを参照してください。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function() {
  document.LoginForm.description.focus();
}

このメソッドでは、フォームとターゲット HTML 要素に名前を割り当てる必要があります。要素に名前を付けるための規則は、入力フィールドの規則と同じです。

JavaScript を使用して選択ボックスまたはドロップダウンにフォーカスを設定する

.focus() メソッドは、選択ボックスまたはドロップダウンで機能します。フォーム内で使用する場合は、document.FormName.SelectBoxName.focus() を使用して、ドロップダウンにフォーカスを設定できます。以下は、使用法を詳しく説明するコードです。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.LoginForm.occupationSelect.focus();
}