JavaScript パスワード入力欄の値を取得/設定する

サンプル	パスワード入力欄とは
	値を取得する
	パスワード入力文字を表示
	値を設定する

パスワード入力欄とは

以下は実際のパスワード入力欄です。

上記パスワード入力欄のhtmlのコードです。

<input type="password" value="" id="pas1" maxlength="5" style="width:200px;"/>

パスワード入力欄は、文字を入力すると伏せ字になります。

inputタグでtypeにpasswordを指定します。

CSSで横幅を指定できます。横(width)を200pxにしています。

入力された値はJavaScriptで取得できます。

値を取得する

ボタンを押すとパスワードのvalue値を取得するサンプルです。

pass

上記サンプルのコードです。

<p>pass <span id="span1"></span></p>
<input type="password" value="red" id="pass1" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const pass1 = document.getElementById("pass1");
    document.getElementById("span1").textContent = pass1.value;
  }
</script>

2行目は、パスワード入力欄です。
7行目は、getElementByIdメソッドでID「pass2」を指定して対象を特定(2行目)しています。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<p>pass <span id="span2"></span></p>
<form name="form1">
  <input type="password" value="red" id="pass2" maxlength="5" />
</form>
<input type="button" value="ボタン2" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const pass2 = document.form1.pass2;
    document.getElementById("span2").textContent = pass2.value;
  }
</script>

9行目は、フォームのname「form1」とパスワードのname「pass2」で対象を特定(3行目)しています。

パスワード入力文字を表示

チェックボックスにチェックを入れるとパスワード入力文字を表示します。
チェックを外すと非表示になります。

　表示

上記サンプルのコードです。

<input type="password" value="red" id="pass3" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn11()" />
<input type="checkbox" id="chk1" />表示
<script>
  const pass3 = document.getElementById("pass3");
  const chk1 = document.getElementById("chk1");
  chk1.addEventListener("click", function () {
    if (chk1.checked) {
      pass3.type = "text";
    } else {
      pass3.type = "password";
    }
  });
</script>

3行目は、チェックボックスです。
7行目は、addEventListenerメソッドでイベントリスナを登録しています。
8行目は、チェックボックスのチェック状況を見てtypeにtextかpasswordにセットしています。

値を設定する

pass

上記サンプルのコードです。

<p>pass <span id="span2"></span></p>
<input type="password" value="red" id="pass2" maxlength="5" />
<input type="button" value="ボタン2" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const pass2 = document.getElementById("pass2");
    pass2.value = "green";
    document.getElementById("span2").textContent = pass2.value;
  }
</script>

2行目は、パスワード入力欄です。
7行目は、getElementByIdメソッドでID「pass2」を指定して対象を特定(2行目)しています。
8行目は、valueに値を設定しています。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<p>pass <span id="span2"></span></p>
<form name="form1">
  <input type="password" value="red" name="pass2" maxlength="5" />
</form>
<input type="button" value="ボタン2" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const pass2 = document.form1.pass2;
    pass2.value = "green";
  }
</script>

9行目は、フォームのname「form1」とパスワード入力欄のname「pass2」で対象を特定(3行目)しています。