【コピペOK！】JavaScriptでパスワードの表示切り替え方法

皆さんこんにちは新米です。

そもそもパスワードって何で伏せ字(●)が表示されるんでしょう？
それは相手に自分のアカウントを不正にログインされないためです。

例えばグーグルのアカウントにログインしようとした時、脇や背後からパスワードを見られてしまう可能性があります。なのでパスワードを伏せ字にする事は、見ず知らずの人にログインされないためのセキュリティ強化に繋がります。

では表示切り替えが必要な理由はなぜでしょう？それはアカウントの作成時に、自分のパスワードを確認しメモを残す為や伏せ字状態でログインに失敗した時にパスワードを確認するためです。

その為ログイン機能やアカウントの作成時にパスワードの表示・非表示の切り替えは必要となります。

今回はJavaScriptでパスワードの表示・非表示の切り替え方法を誰でも簡単にコピペで出来ちゃうサンプルコードをご用意しました！真似してみてくださいね〜

【コピペOK！】JavaScriptでパスワードの表示切り替え方法

パスワード表示・非表示の切り替えに使用する言語はHTML、CSS、JavaScriptの３つとなります。

まずソースコードの実行結果としてはこんな感じです。

[パスワード非表示時]

[パスワード表示時]

JavaScript

 $(".toggle-password").click(function () {

     //アイコンの切り替え
     $(this).toggleClass("mdi-eye mdi-eye-off");

    //入力フォームの取得
    var input = $(this).parent().prev("input");

    //パスワードの表示切替
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
 });

 

HTML

<form>
 　<div class="formItem">
  　<p>
    　<input type="text" placeholder="ID">
  　</p>
  　<p>
  　  <input type="password" placeholder="PASSWORD" id="password">
    　<span class="field-icon">
      　<i toggle="#password-field" class="mdi mdi-eye toggle-password"></i>
   　 </span>
   　</p>
     　 <input type="submit" value="ログイン">
 　</div>
</form>

CSS

   /*テキストボックス・アイコンの位置調整*/ 
   .formItem {
      text-align: center;
   }
   /*パスワードの非表示*/
   .mdi-eye:before {
      background: url(アイコンのURLを貼り付ける);
      background-size: contain;
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top:3px;
      right: 5px;
   }
   /*パスワードの表示*/
   .mdi-eye-off:before {
      background: url(アイコンのURLを貼り付ける);
      background-size: contain;
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top:3px;
      right: 5px;
   }
   .field-icon {
      position: absolute;
   }                            

CSS、「.mdi-eye:before」と「.mdi-eye-off:before」内のbackground:url( );の( )内にそれぞれパスワードの表示・非表示時のアイコンのURLを貼り付けてください。(お好みのアイコンで大丈夫です！)

＞＞目のアイコンをお探しの方はこちらから