suzu6登録フォームで目のアイコンのあるフォームを見かける。 クリックすると入力したパスワードの平文が確認でき、打ち間違いを防止出来るため便利ですね。 それをCSSとjQueryで作成しました。
パスワードの表示/非表示を切り替えるフォーム
まずは作ったフォームを確認してみてください。 パスワードのフォームのアイコンを押すと合わせて表示・非表示を切り替えます。
CSSはF12で検証してください。
Macは⌘+option+i（【Mac】ChromeのデベロッパーツールをF12で開くよう設定する方法）。
※ Emailのフォームは飾りです。ボタンはパスワードをどこへも送りません。
利用したライブラリ
- jquery 3.3.1
- materialdesignicons.css 3.5.95
アイコンのフォントにMaterial Design Iconsを使いました。 Font Awesomeなどアイコンのフォントを使っても大丈夫です。
コードの解説
パスワードの表示・非表示
パスワードの表示・非表示の切り替えはtypeを変更します。
<!-- パスワードを非表示 -->
<input type="password">
<!-- パスワードを表示 -->
<input type="text">
目のアイコンとの連動
目のアイコンのクリックを検知してtypeを変更します。
一緒に目を閉じたアイコンにも変更します。
HTML
<form>
<input type="password" placeholder="Password">
<span class="field-icon">
<i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
</span>
</form>
javascript
// パスワードの表示・非表示切替
$(".toggle-password").click(function () {
// iconの切り替え
$(this).toggleClass("mdi-eye mdi-eye-off");
// 入力フォームの取得
let input = $(this).parent().prev("input");
// type切替
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
アイコンをクリックしたとき、アイコンのクラスと<input>のtypeを変更します。
toggleClass("mdi-eye mdi-eye-off")は実行のたびに、クラスを与えたり消したりを繰り返す。
初めからmdi-eyeのクラスはあるので、最初のトグルではmdi-eyeが消えmdi-eye-offが付く。
次はその反対。。。と繰り返す。
$(this).parent().prev("input");は親要素の隣接する`タグを取りに行っています。
その後、typeを確認して切り替えている。
ソースコードの全文
長いのでPlayCodeというサービスに置きました。
参考
パスワードの入力フォームを作るうえで参考になりそう。
「ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パスワード確認が原因で離脱しています。」 パスワード確認を廃止し、パスワードの表示切替を導入したほうが良い。 間違ったパスワードは再発行してもらうことで解決するのでは。
maxlength=20の欄にユーザが30文字のパスワードを張り付けたとき、20文字で切られる。 プログラム側もそれを知るすべがない。 今後、推奨の文字数が増えることもあるためmaxlengthを使って上限は設けないほうがよさそう。