パスワード入力フォーム表示・非表示

はじめに

現在、自己学習の為、既存サイトを模倣したサイトを作成しています。
調べて実装した内容を自分なりにまとめてみました。
※参考にさせて頂いた記事・サイトは最後に記載しております。

今回の目標

目のマークを押すと表示・非表示が切り替わる パスワード入力欄の実装

色々なサイトで見かける機能ですが、今まであまり気にせず利用していました。
改めて、何故こんな機能が必要なの？？と思い調べると、パスワードは表示すべきか非表示にすべきか、過去、思った以上にたくさんの議論が交わされていた問題のようでした。知らなかった。。。
表示・非表示はどちらにもメリットとデメリットがあり、折衷案としても切り替え機能付きの入力フォームは大変良いのではと思いました。

実装

仕様の確認と指針

・表示・非表示を切り替える際、画面遷移はない。
  > JavaScriptを使用
・表示・非表示を切り替えるには、目のアイコンをクリックする。
  > 目のアイコンは Font Awesome を使用

HTML

HTML

 <form method="post" action="遷移先ページ">
    <label for="password">パスワード</label>
    <div id="inputBox">
       <input type="password" id="password" name="password">
       <span id="view">
          <!-- 目のアイコン -->
          <i class="far fa-eye-slash"></i>
       </span>
     </div>
     <button type="submit">送信</button>
 </form>

パスワード入力フォームを作成。
ここで作成したものが最初に表示される画面になる為、type="password" と記載、
アイコンも type="password" に対応するものを記載。

JavaScript

js

//  id="view"を取得
let viewicon = document.getElementById('view');

//  id="password"を取得
let inputtype = document.getElementById('password');

//  id="view"クリック時の処理を設定
$('#view').on('click', function () {

       //  passwordからtextへ
       if(inputtype.type === 'password'){
              inputtype.type = 'text';
              viewicon.innerHTML = '<i class="far fa-eye"></i>';

        //  textからpasswordへ
        } else {
               inputtype.type = 'password';
               viewicon.innerHTML = '<i class="far fa-eye-slash"></i>';
        }
});

アイコンをクリックした際の処理内容を設定。
input type が password の時は text へ、text の時は password になるよう記載。

備考

アイコンをボタンで表示させる場合は、HTMLの該当部分をbuttonに書き換える

<button id="view"><i class="far fa-eye-slash"></i></button>

だけだとフォーム送信が行われてしまうので、

$('#view').on('click', function (event) {
        event.preventDefault(); 

JavaScriptに preventDefault(); を追記し、ボタンの既定の動作をキャンセル。

さいごに

最後までご覧頂きありがとうございます。
認識違い・間違っている箇所、より適した書き方等がございましたら、是非ご教授頂ければ幸いです。

参考・引用

1. 石戸康平. "パスワード入力欄でパスワード表示・非表示を切り替える". GRAYCODE. 2021-02-24. https://gray-code.com/javascript/toggles-between-showing-and-hiding-the-password/, (参照 2022-01-20)
2. @ tomokichi_ruby. "【JavaScript】innerHTM、textContentの違い". Qiita. 2019-07-16. https://qiita.com/tomokichi_ruby/items/3640f0bc64ad6c676206, (参照 2022-01-20)