【jQuery】フォーム内でパスワードの表示/非表示を切り替える

アイコンをクリックすると、パスワードの表示と非表示を切り替える表現が当たり前の様に使われていますが、今回はそれを簡単にjQueryで実装する方法をお伝えしたいと思います。

DEMOはこちら

実装方法

以下のHTMLとCSS、jQueryを用意します。

HTML

<div class="input-wrap">
	<input type="password" name="password">
	<i class="toggle-pass fa fa-eye-slash"></i>
</div>

CSS

.input-wrap{
	position: relative;
}
	
.toggle-pass{
	position:absolute;
	top:50%;
	right: 10px;
	transform: translateY(-50%);
}

jQuery

$(function() {
  $('.toggle-pass').on('click', function() {
    $(this).toggleClass('fa-eye fa-eye-slash');
    var input = $(this).prev('input');
    if (input.attr('type') == 'text') {
      input.attr('type','password');
    } else {
      input.attr('type','text');
    }
  });
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

「.toggle-passをクリックしたら以下の処理を実行する」という指定です。

jQuery

$('.toggle-pass').on('click', function() {
    //　ここに処理内容を記述
});

3行目

クリックした箇所にクラス名.fa-eyeまたは.fa-eye-slashがついてなければ追加、ついているなら削除します。

jQuery

$(this).toggleClass('fa-eye fa-eye-slash');

4行目

クリックした箇所の隣接するinputタグをinputに代入します。

jQuery

var input = $(this).prev('input');

5行目

もしinputのtype属性がtextなら、textをpasswordに変更。

そうでなければ、type属性はtextに。

jQuery

if (input.attr('type') == 'text') {
  input.attr('type','password');
} else {
  input.attr('type','text');
}

まとめ

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。