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

HTML DOM パスワード入力フィールドの autofocus プロパティとは？使い方とサンプルコード解説

HTML DOM の autofocus プロパティは、HTML の <input> 要素における autofocus 属性と連動するプロパティです。このプロパティを使用することで、ページが読み込まれた際に、パスワード入力フィールドへ自動的にフォーカス（カーソル移動）するかどうかを設定したり、現在の設定値を取得したりすることができます。

構文

autofocus プロパティの基本的な使い方は以下の通りです。

autofocus プロパティを設定する場合

passwordObject.autofocus = true|false

ここで true を指定すると、ページ読み込み時にパスワードフィールドへフォーカスが当たります。false を指定した場合はフォーカスされません。デフォルト値は false です。

サンプルコード

それでは、Input Password の autofocus プロパティを使った具体的な例を見てみましょう。

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

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM パスワード入力フィールドの autofocus プロパティとは？使い方とサンプルコード解説

「CHECK FOCUS」ボタンをクリックすると、以下のように表示されます。

HTML DOM パスワード入力フィールドの autofocus プロパティとは？使い方とサンプルコード解説

コードの解説

このサンプルコードでは、以下のような処理を行っています。

1. パスワード入力フィールドの作成

type 属性に「password」を指定し、id に「PASS」を設定した入力フィールドを作成しています。さらに autofocus 属性が有効（true）になっているため、ページ読み込み時に自動的にフォーカスされます。

Password: <input type="password" id="PASS" autofocus>

2. ボタンの設置

「CHECK FOCUS」ボタンを作成しています。ユーザーがこのボタンをクリックすると、FocusVal() メソッドが実行される仕組みです。

<button onclick="FocusVal()">CHECK FOCUS</button>

3. FocusVal() メソッドの処理内容

FocusVal() メソッドでは、getElementById() メソッドを使って type が「password」の入力要素を取得し、その autofocus プロパティの値を読み取ります。autofocus プロパティは、要素の autofocus 属性の値に応じて true または false を返します。取得した値は変数 P に代入され、innerHTML プロパティを通じて id「Sample」の段落要素内に表示されます。

function FocusVal() {
    var P = document.getElementById("PASS").autofocus;
    document.getElementById("Sample").innerHTML = "The password field has autofocus property set to "+P;
}

まとめ

autofocus プロパティを活用すれば、ログインフォームなどでユーザーがすぐに入力を始められるようになり、利便性の向上が期待できます。JavaScript から動的にフォーカスの状態を確認・制御したい場合にぜひ活用してみてください。

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

    pattern プロパティとはHTML DOM の Input Password（パスワード入力）オブジェクトが持つ pattern プロパティは、パスワード入力フィールドの pattern 属性を取得または設定するために使用されます。pattern 属性には正規表現を指定でき、ブラウザはその正規表現に基づいて入力されたパスワードの形式を自動的に検証します。これにより、サーバー側へ送信する前にクライアント側で入力チェックを行うことが可能になります。構文pattern プロパティを設定する場合の構文は以下のとおりです。passwordObject.pattern = regexpここで rege

  2. HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

    HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru