【保存版】JavaScript で HTML フォームの入力欄にフォーカスを設定する方法とサンプルコード

2024-04-23

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

例

<!DOCTYPE html>
<html>
<head>
  <title>フォーカスを設定する</title>
</head>
<body>
  <form>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">

    <button onclick="setFocus()">フォーカスを設定</button>
  </form>

  <script>
    function setFocus() {
      document.getElementById('name').focus();
    }
  </script>
</body>
</html>

この例では、setFocus() 関数がクリックされると、name IDを持つ入力要素にフォーカスが設定されます。

補足

focus() メソッドは、要素がフォーカス可能である場合にのみ機能します。例えば、disabled 属性が設定された要素にはフォーカスを設定できません。
フォーカスを設定する他にも、focus() メソッドを使用して、以下の操作を実行できます。
- 要素をスクロールビュー内に表示する
- 要素内のテキストを自動選択する
複数の要素にフォーカスを設定したい場合は、document.querySelectorAll() メソッドを使用して、すべての要素を取得してから、それぞれに focus() メソッドを呼び出すことができます。

サンプルコード：JavaScript で HTML フォーム内の要素にフォーカスを設定する

<!DOCTYPE html>
<html>
<head>
  <title>フォーカスを設定する</title>
</head>
<body>
  <form>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email">

    <label for="message">メッセージ：</label>
    <textarea id="message" name="message"></textarea>

    <button onclick="setFocus()">最初の入力欄にフォーカス</button>
    <button onclick="setFocusEmail()">メールアドレス入力欄にフォーカス</button>
    <button onclick="setFocusMessage()">メッセージ入力欄にフォーカス</button>
  </form>

  <script>
    function setFocus() {
      document.getElementById('name').focus();
    }

    function setFocusEmail() {
      document.getElementById('email').focus();
    }

    function setFocusMessage() {
      document.getElementById('message').focus();
    }
  </script>
</body>
</html>

このコードの説明:

HTML 部分では、name、email、message という ID を持つ 3 つの入力欄を含むフォームを作成します。
それぞれの入力欄には、対応するラベルが付いています。
3 つのボタンがあり、それぞれ次の操作を実行します。
- 最初の入力欄にフォーカスを設定
JavaScript 部分では、3 つの関数 setFocus(), setFocusEmail(), setFocusMessage() を定義します。
それぞれの関数は、対応する ID を持つ要素に focus() メソッドを呼び出すことで、その要素にフォーカスを設定します。

このサンプルコードをどのように使用できますか？

このコードを自分の HTML ファイルにコピーして、名前、メールアドレス、メッセージなどの情報を収集するフォームを作成できます。
各ボタンをクリックすると、対応する入力欄にフォーカスが設定されます。これは、ユーザーがフォームに入力し始めるように促すのに役立ちます。
必要に応じて、このコードを自由にカスタマイズして、ニーズに合ったフォームを作成できます。例えば、入力欄を追加したり、ボタンのラベルを変更したりできます。

HTML フォーム内の要素にフォーカスを設定するその他の方法

autofocus 属性は、ページがロードされたときに自動的に要素にフォーカスを設定するために使用できます。この属性は、input、select、textarea などの要素で使用できます。

<label for="name">名前：</label>
<input type="text" id="name" name="name" autofocus>

tabindex 属性は、要素のタブインデックスを設定するために使用できます。タブインデックスは、キーボードを使用して要素間を移動する順序を決定します。値が大きいほど、要素は後でフォーカスされます。

<label for="name">名前：</label>
<input type="text" id="name" name="name" tabindex="1">

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" tabindex="2">

onfocus イベントは、要素にフォーカスが設定されたときに発生するイベントです。このイベントを使用して、フォーカスされたときにスクリプトを実行できます。

<label for="name">名前：</label>
<input type="text" id="name" name="name" onfocus="myFunction()">

<script>
  function myFunction() {
    alert("名前入力欄にフォーカスが設定されました。");
  }
</script>