HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説

HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。

例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。

構文

autofocus プロパティを設定する場合の構文は以下の通りです。

textObject.autofocus = true|false

true を指定するとテキストフィールドにフォーカスが当てられ、false を指定するとフォーカスされません。デフォルト値は false です。

サンプルコード

それでは、HTML DOM の input Text autofocus プロパティの具体的な使用例を見ていきましょう。以下の例では、autofocus 属性が設定されたテキストフィールドの状態を、ボタンをクリックすることで確認できます。

<!DOCTYPE html>
<html>
<body>
<h1>Input text autofocus property</h1>
USERNAME: <input type="text" id="TEXT1" autofocus>
<br><br>
<button onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
    function FocusVal() {
      var P = document.getElementById("TEXT1").autofocus;
      document.getElementById("Sample").innerHTML = "The text field has autofocus property set to "+P;
}
</script>
</body>
</html>

コードの解説

  • <input> 要素に autofocus 属性を付与することで、ページ読み込み時に自動的にフォーカスが当たります。
  • 「CHECK FOCUS」ボタンをクリックすると、FocusVal() 関数が実行されます。
  • 関数内では、getElementById() で取得した要素の autofocus プロパティ値を変数 P に格納し、その結果を画面に出力しています。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説

ページを読み込んだ直後は、autofocus 属性によってテキストフィールドにフォーカスが当たっている状態になります。ここで「CHECK FOCUS」ボタンをクリックすると、次のように autofocus プロパティの値が表示されます。

HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説

まとめ

input Text の autofocus プロパティは、ページ読み込み時の自動フォーカスの有無を制御する便利な機能です。true / false の真偽値で簡単に設定でき、JavaScript から動的に状態を取得することも可能です。フォームの利便性を高めたい場合にぜひ活用してみてください。

  1. HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text patternプロパティは、テキスト入力フィールドのpattern属性を設定または取得するために使用されます。このプロパティを利用することで、pattern属性に指定した正規表現に基づいて、ユーザーが入力したテキストが妥当な形式かどうかを自動的に検証できます。 構文 patternプロパティの基本構文は以下の通りです。 patternプロパティの設定： textObject.pattern = regexp ここで「regexp」は、テキストフィールドの入力値を検証するための正規表現です。正規表現を指定することで、特定の文字数や文字種（数字のみ、アルファ

  2. HTML DOM 入力テキストの name プロパティとは？設定・取得方法を解説

    HTML DOM の Input Text（テキスト入力フィールド）の name プロパティは、name 属性の値を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後、そのデータを識別するために重要な役割を果たします。 構文 name プロパティの構文は以下のとおりです。 name プロパティを設定する場合 textObject.name = name ここでの name には、テキストフィールドに付ける名前を指定します。 name プロパティを取得する場合 textObject.name サンプルコード それでは、Input Text の name