【JavaScript】目のマークでパスワードの表示を切り替える実装方法

最終更新日:2023年01月27日公開日:2021年5月24日 2021年05月

1. 目のマークでパスワードの表示非表示の切り替え実装
2. サンプルコード
- 2.1. html
3. 解説

目のマークでパスワードの表示非表示の切り替え実装

以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。
javascript を使わず css のみでの実装は【CSS】目のマークでパスワードの表示を切り替える実装方法をご参照ください。

【CSS】目のマークでパスワードの表示を切り替える実装方法目のマークでパスワードの表示非表示を切り替える目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での

https://www.rectus.co.jp/archives/31372021/06/22

以下に動かせるサンプルを用意しましたので実際に動かしてみてください。

サンプルコード

解説は後述します。

html

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <style>
      #textPassword {
        border: none; /* デフォルトの枠線を消す */
      }
      #fieldPassword {
        border-width: thin;
        border-style: solid;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <form id="fieldPassword">
      <input type="password" id="textPassword" value="password123">
      <span id="buttonEye" class="fa fa-eye" onclick="pushHideButton()"></span>
    </form>
    <script language="javascript">
      function pushHideButton() {
        var txtPass = document.getElementById("textPassword");
        var btnEye = document.getElementById("buttonEye");
        if (txtPass.type === "text") {
          txtPass.type = "password";
          btnEye.className = "fa fa-eye";
        } else {
          txtPass.type = "text";
          btnEye.className = "fa fa-eye-slash";
        }
      }
    </script>
  </body>
</html>

解説

HTML解説：目のマークの設置

今回は fontawesome の目のマークを使っています。アイコンのファイルをダウンロードして WEB サーバにアップロードする方法もありますが、今回は CDN を用いて head タグの中で読み込んでいます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

公式では i タグを用いていますが、HTML5 では i タグは他と区別したいテキスト・印刷される際にイタリック体となるようなテキストを表すとあります。icon(アイコン) の頭文字の "i" ではありませんので注意が必要です。
本来のタグの意味とは異なった使い方をするのもいかがなものかと思いましたので、今回は i タグは使わずに span タグを使いました。

<span id="buttonEye" class="fa fa-eye" onclick="pushHideButton()"></span>

目のマークが枠内に入っている枠線を用意

目のマークは input タグの枠内に入っているでデザインにしたいので、まず input タグの枠線を消します。

#textPassword {
  border: none; /* デフォルト枠線を消す */
}

消した枠線の代わりに、目のマークも記入欄に含まれた枠線を用意する必要があります。form タグに付与した id の fieldPassword を指定して枠線を作成します。
枠線の太さなど、input タグの枠線に似せた設定にしました。

#fieldPassword {
  border-width: thin;
  border-style: solid;
  width: 200px;
}

JavaScript解説：目のマークのクリックで切り替え実装

以前紹介した【JavaScript】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替えるではチェックボタンを利用してパスワードの表示非表示を書き換えていましたが、今回は目のアイコンのクリックで表示非表示を切り替えています。
初期状態ではパスワードは隠されていて(input タグの type がpassword)、目が開いている状態のアイコンです。目のアイコンをクリックした時に、input タグの type が text になります。また、クリック時に目が開いている時のクラス名( fa-eye )と、目にスラッシュが入っている時のクラス名( fa-eye-slash )を切り替えます。以下が該当するコードです。

if (txtPass.type === "text") {
  txtPass.type = "password";
  btnEye.className = "fa fa-eye";
} else {
  txtPass.type = "text";
  btnEye.className = "fa fa-eye-slash";
}

以上、 JavaScript を使用した、目のマークのクリックでパスワードの表示・非表示を切り替える方法をご紹介しました。