【JSコピペでOK】黒丸のパスワードをテキストにCSSで表示・非表示を切り替える

パスワードを表示できるようになってきたこの頃

Googleのログイン パスワード入力画面のように、黒丸で表示しているパスワードを、テキストに表示できるサイトが増えてきています。

下図はGoogleのログイン画面ですが、「目」のアイコンをクリックすることで、●●●で表示されているパスワードをテキストで表示してくれます。

「あれ？正しく入力したつもりなのにログインできない」と困ることは少なくなる便利な機能です。

そもそもなぜパスワードは●●●表示なのか

パスワードを入力しようとするときに、黒丸の伏せ字で表示されるのはなぜでしょうか？

答えは簡単、隣にいる人、後ろにいる人に見えないようにするためです。

だからこそ、周りに人がいなければテキスト表示をしてもとりわけ問題ないのです。

パスワードをGoogle風にアイコンでテキストに切り替えるための考察

動作サンプルはこちらです。

まずは好みに合わせてお好きなアイコンを用意してください。

オンオフを切り替えるためには、現在がパスワードが伏せ字の状態なのか、テキスト表示されている状態なのかを判別する必要があります。

手っ取り早そうなのが、やはりチェックボックスの機能で、チェック状態とチェックなしの状態を利用したいと思います。

ただ、チェックボックスでは味気ないので、チェックボックスの機能だけ使い、チェックボックスの見た目は隠す方向でいきます。

また、パスワードの伏せ字を表示するにはとても簡単、input type=”password” を “text”にするだけです。
ここではJSのattrで置き換えます。

html

css

input::-webkit-input-placeholder {
      color: #9ca0a5
}

input::-moz-placeholder {
      color: #9ca0a5
}

input:-ms-input-placeholder {
      color: #9ca0a5
}

label {
      align-items: center;
      background: #fff;
      box-sizing: border-box;
      display: flex; //inputボックスとアイコンを横並びに
      justify-content: space-between;
      padding: 8px 10px;
      position: relative;
      width: 300px;
      height: 46px;
}

input {
      border: none;
      font-size: 18px;
}

input[type=checkbox] {//チェックボックスとしての機能
      cursor: pointer;
      opacity: 0; //機能だけでいいので透明に
      position: absolute;
      right: 5px;
      width: 30px;
      height: 30px;
}

.iconEye::after {//アイコンの表示
      background: url(画像のURL) no-repeat 96%;
      background-size: contain;
      content: '';
      display: block;
      width: 30px;
      height: 30px;
}

js

$(function() {
      $('#passwordCheck').change(function() {
          if ($(this).prop('checked')) {
              $('#password').attr('type', 'text');
          } else {
              $('#password').attr('type', 'password');
          }
      });
});

動作サンプルはこちらです。