JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下
实现代码：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ position: absolute; right: 10px; top:15px; font-size: 20px; cursor: pointer; } .fa-eye-slash{ margin-top: 6px; margin-left: 7px; width: 24px; height: 20px; background-image: url(./vivo_img/login/eye-password.png); background-repeat: no-repeat; background-size: 24px 17px; } .fa-eye{ margin-top: 6px; width: 24px; margin-left: 7px; height: 20px; background-image: url(./vivo_img/login/eye-password-active.png); background-repeat: no-repeat; background-size: 24px 17px; } </style> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.12.4.min.js"></script> </head> <body> <dd> <input type="password" placeholder="设置密码：8-16位字母和数字" maxlength="16"> <i></i> </dd> <script type="text/javascript"> $(".password").on("click", ".fa-eye-slash", function () { $(this).removeClass("fa-eye-slash").addClass("fa-eye"); $(this).prev().attr("type", "text"); }); $(".password").on("click", ".fa-eye", function () { $(this).removeClass("fa-eye").addClass("fa-eye-slash"); $(this).prev().attr("type", "password"); }); </script> </body> </html>