👁を押したら●●が見える実装方法公開 #JavaScript

パスワードマスキングとは...

コレですね！　言葉では説明しません。

導入することで解決することができる課題

入力ミスによる認証失敗が防げる

誤った情報を登録した場合には、ログインができなくなってしまう場合がある

パスワードを覗かれる可能性がある→セキュリティの観点で良くない

個人的見解

・ユーザーにストレスを与えない、離脱率を減らす観点で、導入するに越した事はないのではないのかという見解です。導入の為への工数も少ない為、コスパの良いユーザビリティ向上手段だと感じました。

有名企業のWEBサイトのパスワードマスキング導入有無の調査

・有名な企業のwebサイトで導入されているかを確認してみました。ザッと思いついたWEBサイトを４件調べてみたので、参考程度に実際にサイトを確認してもいいかもしれませんね。

🔻導入調査 (アカウント登録画面について, 2020/12/4時点)

企業名称	導入の有無
Amazon	❌ (無)
Instagram	🔵　(有)
楽天	❌ (無)
メルカリ	🔵　(有)

→4件だけの調査で一概にいえないですが、導入していない２社はどちらともECサイトなので、絶対にパスワードをチラ見させないようにしているように感じました。

導入方法 (Ruby on Rails)

※UIについては考慮しない実装になります

STEP1　▶　type属性のinput要素を設置する

= f.password_field :password, class: "password-input"

まずはtype属性のinput要素を作成してください。

classを指定して、JSで取得できるようにします。

STEP2　▶　目などを配置する

<div class="fas fa-eye"></div>

今回はfont-awesomeを使用しました。

STEP3　▶　Javascript実装

function PassMask() {
  const PasswordInput = document.querySelector('.password-input');
  const PasswordEye = document.querySelector('.password-eye');

  PasswordEye.addEventListener("click", () => {
    if(PasswordInput.type === "password"){
      PasswordInput.type = "text";
      PasswordEye.classList.remove("fa-eye");
      PasswordEye.classList.add("fa-eye-slash");
    }else{
      PasswordInput.type = "password";
      PasswordEye.classList.remove("fa-eye-slash"); 
      PasswordEye.classList.add("fa-eye");
    }
  });
}
window.addEventListener('load',PassMask);

ぜひ、実装してみてください。

👁を押したら●●が見える実装方法公開