パスワード入力欄の文字表示切り替え機能を実装しよう

ログインフォームなどで、入力されたパスワードを確認するために、チェックボックスをクリックするとテキストが表示されるように切り替える機能が必要になることがあります。

仕組みは単純で、チェックボックスの状態に合わせてinput要素のtype属性をpasswordまたはtextに変更するだけ実装できます。

ここではJavaScriptを使って、チェックボックスがチェックされたらパスワード入力欄の文字が表示される機能を実装してみましょう。

処理の流れ

メソッド、イベントについて

addEventListener()メソッドとDOMContentLoadedイベントについては、MDNを参照してください。

MDN Web Docs

EventTarget: addEventListener() メソッド – Web API | MDN addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

MDN Web Docs

Document: DOMContentLoaded イベント – Web API | MDN DOMContentLoaded イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。

HTMLについて

今回、パスワード入力欄とチェックボックスは以下のようなHTMLにしています。

※form要素は省略しています

<label for="inputPassword">パスワード</label>
<input id="inputPassword" type="password">

<label for="inputCheckbox"><input id="inputCheckbox" type="checkbox"> パスワードを表示する</label>

処理の説明

それでは、パスワード入力欄の文字表示を切り替えるためのJavaScriptを、ステップごとに説明していきます。

STEP1 HTMLの読み込みが完了してから処理を開始

まず、addEventListener()メソッドで、HTMLが読み込み完了したときに通知されるDOMContentLoadedイベントを監視します。

document.addEventListener('DOMContentLoaded', function(event) {

}, false);

STEP2 対象となる要素を取得

パスワード入力欄を取得

パスワード入力欄は、以下のようなHTMLになっています。

<input id="inputPassword" type="password">

input要素のid属性を目印に、getElementById()メソッドを使ってチェックボックスを取得します。

let targetElement = document.getElementById('inputPassword');

変数targetElementを宣言して、取得したパスワード入力欄のinput要素を格納します。

表示切り替えチェックボックスを取得

チェックボックスは、以下のようなHTMLになっています。

<input id="inputCheckbox" type="checkbox">

input要素のid属性を目印に、getElementById()メソッドを使ってチェックボックスを取得します。

const triggerElement = document.getElementById('inputCheckbox');

変数triggerElementを宣言して、取得したチェックボックスのinput要素を格納します。

STEP3 チェックボックスにイベントリスナーを設定

取得したチェックボックスにaddEventListener()メソッドを設定して、チェックボックスの状態が変わったときに処理が実行されるようにします。

triggerElement.addEventListener('change', function(event) {

}, false);

STEP4 チェックボックスに連動して、パスワード入力欄のtype属性を変更

チェックボックスがチェックされているか判定

状態が変化したとき、チェックボックスはthisに格納されていますから、thisのcheckedプロパティでチェックされているかどうかを判定します。

if (this.checked) {
  //チェックされているときに実行する処理
} else {
  //チェックが外れているときに実行する処理
}

パスワード入力欄のtype属性を変更

チェックボックスの状態に合わせて、パスワード入力欄のtype属性を変更します。

setAttributeメソッドを使って、チェックされていればtype属性をtextに、チェックが外れていればtype属性をpasswordに設定します。

if ( this.checked ) {
  targetElement.setAttribute('type', 'text');
} else {
  targetElement.setAttribute('type', 'password');
}

実行結果

完成したJavaScriptのコードは以下のようになります。

document.addEventListener('DOMContentLoaded', function(event) {

  const targetElement = document.getElementById('inputPassword');
  const triggerElement = document.getElementById('inputCheckbox');

  triggerElement.addEventListener('change', function(event) {
    if ( this.checked ) {
      targetElement.setAttribute('type', 'text');
    } else {
      targetElement.setAttribute('type', 'password');
    }
  }, false);

}, false);

このコードを実行すると、以下のようにチェックボックスと連動して、パスワード入力欄の文字表示が切り替わります。

まとめ

表示切り替えは属性値を変えるだけなので、簡単に実装できました。

パスワード認証はフレームワークなどを使うことが多いので、自分で実装する機会は多くないと思います。
しかし、仕組みを知っておくといろいろと応用できるので、自分で実装してみることも大事ですね。