パスワード入力欄に目のマークがついていて、押すとパスワードが見えるようになっているサイトが増えました。（一時期のMicrosoft Edgeではブラウザ機能としてついていましたが、今はありません）
この機能、けっこう簡単に実装できますので、その方法を紹介します。
目次
CodePenデモ
まず動いているものをご覧ください。
See the Pen Password input visible/invisible by Tsuneaki Hasekura (@tsunet111) on CodePen.
パスワードが見える仕組み
仕組みはいたってシンプルで、<input type="password"> と書けばパスワードは見えなくなり、<input type="text"> とすればパスワードが見えるようになります。これをJavaScriptで切り替えます。
コード解説
CSSで見栄え調整している部分の解説は割愛します。
目のアイコンをクリックしたら、以下の関数（メソッド）が呼び出されます。
JavaScript
function passwordview() {
if (document.querySelector("input").type == "password") {
//input type="password" だった場合は、input type="text" に切り替えます
document.querySelector("input").type = "text";
//ボタンの見栄えを切り替えます。
document.querySelector("i").classList.remove('fa-eye');
document.querySelector("i").classList.add('fa-eye-slash');
} else {
//そうではなかったら、逆に、input type="password" に切り替えます。
document.querySelector("input").type = "password";
//ボタンの見栄えを切り替えます。
document.querySelector("i").classList.remove('fa-eye-slash');
document.querySelector("i").classList.add('fa-eye');
}
}
非常にシンプルに実装できるわりに、UXが向上しますので、ぜひご活用ください。