パスワード入力欄で目のボタンで表示・非表示を切り替える方法

パスワード入力欄の表示・非表示を切り替え

最近のフォームのパスワード入力欄には目のボタン(アイコン)を設置してパスワードの表示・非表示を切り替え可能にしているWebサイトが多くなっています。

パスワード入力欄で目のボタンで表示・非表示を切り替える方法

パスワード入力欄は他の入力欄とは異なり、入力した内容が●●●●●●●●のようになって見ることができません。

↑パスワード入力欄では●になる

第3者の盗み見防止には有効ですが、入力者自身も見ることができないため、正しいパスワードが入力されているか確認できず困ることがあります。

また、例えば自分では正しく入力しているつもりでも、CapsLockキーが有効だったり、キーボードが壊れていて正しい文字が入力されないことなどもあります。

さらに、文字入力が苦手な方は入力精度が低いので、パスワードの表示・非表示のボタンを設置したほうが間違えずにログインできる可能性が高くなります。

表示・非表示切り替えの実装方法

今回はよくある以下のようなtype="password"のinputタグに表示・非表示を切り替える目のボタン(アイコン)を設置する方法について説明します。

<input type="password" class="password__input">
.password__input {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}

パスワード表示・非表示を切り替え修正前サンプル

まず、inputタグの次の行に表示・非表示を切り替えのためのbuttonタグを配置し、この2つをdivで囲む。

<div class="password-wrapper">
  <input type="password" class="password__input">
  <button class="password__toggle"></button>
</div>

2つをdivで囲ったのは.password-wrapperにdisplay: flexを適用させて位置を調整するためです。

borderは.password-wrapperのほうに付けるのでinputの方はborder: noneで消してください。

.password-wrapper {
  display: flex;
  max-width: 500px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.password__input {
  flex: 1;
  outline: none;
  appearance: none;
  padding: 10px 0 10px 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  font-size: 16px;
}

次に.password__toggleをCSSで調整します。

目のアイコンはGoogle Fontsのアイコンを利用しています。

.password__toggle {
  width: 40px;
  border: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/></svg>") no-repeat center center;
  background-size: 50% auto;
  cursor: pointer;
}

目アイコンの切り替えはボタンを押した際にJavaScriptで.password__toggleに.is-visibleを追加することで実装するので切替時の目アイコンのCSSも追加します。

.password__toggle.is-visible {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
}

あと目のボタン(アイコン)にマウスオーバーしたときに見た目が変わったほうがわかりやすいので、以下のCSSも追加します。

@media (any-hover: hover) {
  .password__toggle:hover {
    opacity: 0.7;
  }
}

CSSについては以上で、あとは以下の切り替え用のJavaScriptを追加すれば完成です。

const passwordToggle = document.querySelector('.password__toggle')

passwordToggle.addEventListener('click', (e) => {
  const input = e.target.previousElementSibling
  const type = input.getAttribute('type')
  input.setAttribute('type', type === 'password' ? 'text' : 'password')
  passwordToggle.classList.toggle('is-visible')
})

見ての通り、目のボタン(アイコン)がクリックされたらinputタグのtypeをtextまたはpasswordに切り替えてclassList.toggle('is-visible')により、目アイコンを切り替えています。

既存のWebサイトでも簡単に実装できてユーザビリティが向上するので、特に理由がなければ必ず実装することをオススメします。

パスワード表示・非表示を切り替え修正後サンプル