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

HTML DOM パスワード入力フィールドのvalueプロパティとは？使い方を徹底解説

HTML DOM Input Password のvalueプロパティとは

HTML DOMのInput Passwordにおけるvalueプロパティは、type属性が「password」に設定されたinput要素に関連付けられたプロパティです。このプロパティを使用することで、パスワードフィールドのデフォルト値を指定したり、ユーザーが入力した値を取得・変更したりすることができます。

構文

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

passwordObject.value = text;

ここでの「text」には、パスワードフィールドに設定したい値を指定します。

サンプルコード

input passwordのvalueプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input password Value property</h1>
PASSWORD: <input type="password" id="PASS1">
<p>下のボタンをクリックすると、上記要素の値を取得できます</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("PASS1").value;
      document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
   }
</script>
</body>
</html>

実行結果

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

HTML DOM パスワード入力フィールドのvalueプロパティとは？使い方を徹底解説

パスワードフィールドに何かテキストを入力してから「Get Value」ボタンをクリックすると、入力した値が画面に表示されます。

HTML DOM パスワード入力フィールドのvalueプロパティとは？使い方を徹底解説

コードの解説

それでは、上記のサンプルコードの処理内容を順番に見ていきましょう。

まず、type属性が「password」に設定され、idが「PASS1」に指定されたinput要素（パスワード入力フィールド）を作成しています。

PASSWORD: <input type="password" id="PASS1">

次に、「Get Value」ボタンを配置しています。ユーザーがこのボタンをクリックすると、onclickイベントによってgetValue()メソッドが実行される仕組みです。

<button onclick="getValue()">Get Value</button>

getValue()メソッド内部では、getElementById()メソッドを使って対象のinput要素を取得し、その「value」属性の値を変数tに代入しています。「Get Value」ボタンをクリックする前にパスワードフィールドへ何も入力していなかった場合は、空の文字列が返される点に注意してください。value属性はユーザーの入力に連動して変化するため、クリック時点でパスワードフィールドに入力されている最新の値が取得されます。最後に、取得した値をinnerHTMLプロパティ経由で、id「Sample」が付与された段落要素に表示しています。

function getValue() {
   var t = document.getElementById("PASS1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}

補足ポイント

valueプロパティは読み取りだけでなく書き込みにも対応しているため、JavaScriptからパスワードフィールドの初期値を動的に設定することも可能です。なお、type="password"の入力内容は画面上でマスク（●●●など）されて表示されるため、第三者の目からは隠されていますが、JavaScript経由では実際に入力された文字列をそのまま取得できるという点は覚えておくと良いでしょう。

  1. HTML DOM 入力パスワードのdefaultValueプロパティとは？使い方を徹底解説

    HTML DOM Input Password defaultValueプロパティとはHTML DOMのInput Password defaultValueプロパティは、パスワード入力フィールドのデフォルト値（defaultValue）を設定または取得するために使用されるプロパティです。要素のdefaultValueとは、HTMLのvalue属性に割り当てられた値を指します。よく似たプロパティに「value」がありますが、両者には重要な違いがあります。defaultValueプロパティは、最初に指定された元のデフォルト値を保持し続けるのに対し、valueプロパティはユーザーが入力フィールドに

  2. HTML DOM入力検索値（value）プロパティの使い方を解説

    HTML DOMのInput Search（type=search）におけるvalueプロパティは、検索フィールドのvalue属性に関連付けられたプロパティです。このプロパティを利用することで、検索フィールドに入力されている値を取得したり、JavaScriptから任意の値を設定したりすることができます。また、検索フィールドのデフォルト値を指定する目的でも使われ、ユーザーがテキストを入力すると、その値はユーザーの入力内容に置き換わります。構文valueプロパティの基本的な構文は以下の通りです。値を設定する場合searchObject.value = text;「text」の部分には、検索フィール