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

HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

HTML DOM 入力パスワードオブジェクトとは

HTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。

JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。

Input Password オブジェクトの主なプロパティ

パスワードオブジェクトで利用できる主なプロパティは以下のとおりです。

No.プロパティと説明
1autocomplete
パスワードフィールドの autocomplete 属性値を設定または取得します。
2autofocus
ページ読み込み時に、パスワードフィールドが自動的にフォーカスを取得するかどうかを設定または取得します。
3defaultValue
パスワードフィールドの初期値（デフォルト値）を設定または取得します。
4disabled
パスワードフィールドが無効化されているかどうかを設定または取得します。
5form
パスワードフィールドを含むフォームへの参照を返します。
6maxLength
パスワードフィールドに入力できる最大文字数（maxlength 属性値）を設定または取得します。
7name
パスワードフィールドの name 属性値を設定または取得します。
8pattern
パスワードフィールドの pattern 属性値（正規表現による入力チェック用）を設定または取得します。
9placeholder
パスワードフィールドの placeholder 属性値（入力ヒント）を設定または取得します。
10readOnly
パスワードフィールドが読み取り専用かどうかを設定または取得します。
11required
フォーム送信前にパスワードフィールドの入力が必須かどうかを設定または取得します。
12size
パスワードフィールドの size 属性値（表示幅）を設定または取得します。
13type
読み取り専用プロパティです。フォーム要素の種類（ここでは "password"）を返します。
14value
パスワードフィールドの value 属性値（入力内容）を設定または取得します。

Input Password オブジェクトのメソッド

パスワードオブジェクトで利用できるメソッドは以下のとおりです。

No.メソッドと説明
1select()
パスワードフィールド内の内容を選択状態にします。

構文

入力パスワードオブジェクトを作成する構文は以下のとおりです。

var P = document.createElement("INPUT");
P.setAttribute("type", "password");

サンプルコード

それでは、Input Password オブジェクトの具体的な使用例を見ていきましょう。ボタンをクリックすると、type="password" の入力フィールドが動的に生成される例です。

<!DOCTYPE html>
<html>
<head>
<script>
    function createPASS() {
        var P = document.createElement("INPUT");
        P.setAttribute("type", "password");
        document.body.appendChild(P);
    }
</script>
</head>
<body>
<p>下のボタンをクリックすると、type="password" の入力フィールドが作成されます</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>

実行結果

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

HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

CREATE ボタンをクリックし、新しく生成されたパスワードフィールドに入力すると、以下のように文字がマスクされて表示されます。

HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

コードの解説

この例では、以下のような仕組みで動作しています。

まず、CREATE ボタンがクリックされると createPASS() 関数が呼び出されます。

<button onclick="createPASS()">CREATE</button>

createPASS() 関数の内部では、document オブジェクトの createElement() メソッドに「INPUT」を引数として渡すことで <input> 要素を新規作成し、変数 P に代入しています。

続いて、setAttribute() メソッドを使って type 属性を作成し、その値として「password」を設定します。なお、setAttribute() は指定した属性がまだ存在しない場合には、新しい属性を作成したうえで値を割り当てるという動作になります。

最後に、document.body に対して appendChild() メソッドを使用することで、type="password" の入力要素を body の子ノードとして追加しています。

function createPASS() {
    var P = document.createElement("INPUT");
    P.setAttribute("type", "password");
    document.body.appendChild(P);
}

このように、JavaScript の DOM 操作を組み合わせれば、パスワード入力フィールドを自由に動的生成・制御することができます。フォームのバリデーションやユーザーインターフェースの柔軟な構築にぜひ活用してみてください。

  1. HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

    HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意

  2. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input