フォームのパスワードを入力する時、自分で打ったパスワードを見たい時ってあるよね。
同じパスワードを２回打つフォームもあるし、健忘症な自分は、
どんなパスワードを打ったかすぐ忘れちゃうので、表示できる機能があるとありがたいです。
ではデモとコードを！
デモ
HTML
<label class="pass"> <input type="password" placeholder="パスワードを入力してください" /> <span class="eye"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M512,319.761c-0.881-1.49-21.82-38.71-63.992-76.622c-8.616-7.728-18.184-15.47-28.604-22.926l25.519-44.207c6.162-10.679,2.511-24.338-8.176-30.507l-1.636-0.936c-10.679-6.169-24.338-2.511-30.506,8.168l-24.996,43.305c-3.679-1.853-7.427-3.665-11.274-5.392c-26.058-11.756-55.921-20.289-89.057-23.086v-53.942c0-12.33-10.001-22.331-22.331-22.331h-1.888c-12.337,0-22.338,10.001-22.338,22.331v53.942c-33.136,2.804-62.999,11.33-89.064,23.086c-3.854,1.742-7.498,3.644-11.197,5.518l-25.065-43.43c-6.16910.679-19.828-14.338-30.507-8.168l-1.636,0.936c-10.686,6.168-14.337,19.828-8.176,30.507l25.534,44.221c-23.184,16.582-41.934,34.625-56.285,50.662C12.624,297.444,0.643,318.636,0,319.761l29.332,16.484l13.673,7.749l0.021-0.042l0.014-0.014c0.895-1.63,20.324-34.689,56.482-66.328c18.071-15.848,40.248-31.332,66.278-42.787c26.066-11.456,55.915-18.96,90.198-18.974c35.108,0.014,65.565,7.881,92.058,19.799c39.682,17.848,70.321,45.172,90.806,68.133c10.245,11.463,17.938,21.785,22.981,29.101c2.532,3.657,4.392,6.566,5.581,8.49c0.588,0.965,1.021,1.679,1.28,2.119l0.259,0.448l0.042,0.063l9.708-5.518l-9.736,5.469L512,319.761z" style="fill: rgb(75, 75, 75);"></path><path d="M255.997,247.936c-47.711,0-86.386,38.675-86.386,86.393c0,47.711,38.675,86.386,86.386,86.386c47.718,0,86.393-38.675,86.393-86.386C342.39,286.611,303.715,247.936,255.997,247.936z" style="fill: rgb(75, 75, 75);"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M404.946,230.669C428.2,245.234,463.907,261.977,512,268.662c-32.248-25.252-53.918-48.832-67.492-66.023c14.297-12.091,27.43-25.52,39.049-40.207l-37.515-29.708c-21.308,26.916-48.434,49.013-79.43,64.366c-31.011,15.346-65.853,23.971-102.884,23.985c-37.027-0.014-71.872-8.639-102.883-23.985c-31-15.353-58.129-37.45-79.43-64.366l-37.522,29.708c9.073,11.461,19.068,22.154,29.791,32.067C60.933,211.915,37.696,239.141,0,268.662c53.55-7.446,91.748-27.35,114.486-42.848c8.111,5.122,16.475,9.884,25.121,14.159c1.249,0.615,2.515,1.208,3.774,1.802c-3.662,21.749-12.658,60.502-33.55,94.696c40.634-18.03,69.264-54.359,83.775-76.427c10.882,2.807,22.017,4.971,33.362,6.461l29.028,112.77l28.623-111.15c12.177-0.897,24.155-2.554,35.866-4.963c15.075,22.242,42.917,56.103,81.691,73.308c-18.993-31.083-28.153-65.928-32.414-88.351c6.135-2.51,12.184-5.217,18.096-8.147C393.68,237.087,399.352,233.932,404.946,230.669z" style="fill: rgb(75, 75, 75);"></path> </svg> </span> </label> </div>
CSS
.pass {
position: relative;
}
.eye svg {
position: absolute;
top: 0px;
right: 18px;
width: 26px;
height: 26px;
opacity: 0;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.eye svg:last-child {
top: 9px;
opacity: 1;
}
jQuery
$(".eye").on("click", function() {
if($(".eye svg:first-child").css("opacity") == 0) {
// パスワードを表示する
$(".pass input").get(0).type = 'text';
$(".eye svg:first-child").css({opacity: 1});
$(".eye svg:last-child").css({opacity: 0});
} else {
// パスワードを非表示にする
$(".pass input").get(0).type = 'password';
$(".eye svg:first-child").css({opacity: 0});
$(".eye svg:last-child").css({opacity: 1});
}
});
解説
HTMLがちょっと長いですが、目のアイコンはsvgの直打ちになっているのでそのままコピペすればアイコンも表示されます。
パスワードを表示する方法は、jQuery内の「$(“.pass input”).get(0).type = ‘text’;」このjavascriptでinputの「type」属性をpasswordからtextに変更して表示非、表示を変更しています。
ちょっと調べたらjQueryでは、「type」属性を変更する方法が無い？のかjavascriptの「get()」で取得するみたい！
jQueryで書いてると、「get()」ってあまりなじみがないから「？？？」ってなるけど、こうゆう書き方しなきゃダメみたい。
それ以外のjQueryの記述は、開いた目や閉じた目のアイコンを表示したり消したりしてるだけだからね！
デベロッパーツールで確認すると、ちゃんと「type」属性が変更されてるのが確認できますね！
もし目のアイコンが気に入らなかったら、色々変更してね！
画像にpngやjpgを使う場合は、HTMLと合わせてCSSとjsの「svg」も「png」や「jpg」に変更してね！
以上で「jQueryでパスワードの表示・非表示を切り替える方法」終わりです！
コメント