入力フォームのパスワード非表示/表示切り替え

言語:HTML+JavaScript


ウェブブラウザでパスワードを入力する場合、入力中のパスワードが伏せ字にされているのを目にすると思います。
入力を盗み見て情報を不正に入手するショルダーサーフィン対策のためです。

しかし、否定的な見解もあります――手元を見られるのに画面だけ隠してもセキュリティ効果は限定的、フィードバックを提供するというユーザビリティの原則に反している、自分で見られる方がミスを減らせる、という考えです。
ユーザーが忘れるのを怖がって簡単なパスワードしか入れなければ、セキュリティレベルが下がって本末転倒ですからね!
ITmedia「パスワード入力の『****』は不要?研究者の間で激しい論議」(外部サイト)

入力した情報は確認したいですが、伏せ字になっていることで「パスワードを他人に教えてはいけない」とユーザーに示す役割も果たしていると考えられますし、ビジネスシーンでのデモンストレーションなど人前で画面を見せる際には表示されると都合が悪いです。

これらを両立させるいい方法がありました。
最初はパスワードを非表示にしておき、ユーザー自身で非表示/表示を切り替えられる機能を実装することです。
これを導入されてはいかがですか?

パスワード入力欄の横に目アイコンを表示して、クリックするごとと非表示/表示を切り替えられるようにします。
(パスワード表示時は目にスラッシュを重ねたアイコンを表示します。)
初期状態では非表示にしておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パスワード非表示/表示切り替え</title>
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"><!--アイコン画像にリンク-->
</head>
<body>
  <input type="password" id="password" placeholder="パスワード" required><!--パスワード入力フォーム-->
  <i id="icon" class="fas fa-eye"></i><!--アイコン表示場所-->
  <script>
    //イベントハンドラ「アイコンをクリック」
    document.getElementById("icon").onclick = function(){
      if (document.getElementById("password").getAttribute("type") == "password") {
        this.className = "fas fa-eye-slash";//アイコンを目スラッシュに切替
        document.getElementById("password").setAttribute("type", "text");//パスワード欄の入力タイプをテキストに切替(表示)
      } else {
        this.className = "fas fa-eye";//アイコンを目に切替
        document.getElementById("password").setAttribute("type", "password");//パスワード欄の入力タイプをパスワードに切替(非表示)
      }
    }
  </script>
</body>
</html>

解説

行ごとについては、プログラム内の注釈を参照してください。

  1. パスワード入力ページを表示するHTMLに、ウェブサイト「Font Awesome」にある「all.css」へのリンク(linkタグ)を記載します(6行目)。
    iタグのclass属性の値に応じて、このcssファイルを利用してアイコンが表示されます。
  2. HTMLにパスワード入力フォームを記載します(9行目)。
  3. HTMLに目アイコンの表示を記載します(10行目)。
    今回のclass属性「fas fa-eye」の場合、「fas」が「Font Awesomeのアイコン使用」、「fa-eye」が「目アイコンを表示」を表す値です。
  4. JavaScriptに目アイコンをクリックすると非表示/表示を切り替えるイベントハンドラ(関数)を追加します(13~21行目)。
    サンプルでは、JavaScriptもHTMLファイル内に記載しています。
    入力中のパスワードは、フォーム(inputタグ)のtype属性が「password」なら表示されず、「text」なら表示されますので、このtype属性を書き換えることで非表示/表示を切り替えます。


動作画面(パスワード非表示/表示)

プログラムをアプリの一部として組み込んで、デザインをCSSで整えたのが冒頭の画像です。
皆さんも自分の用途に応じてアレンジしてみてください。