js实现input密码框显示/隐藏功能
网络 2018-11-19 1523
JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下
实现代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!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="js/jquery-1.12.4.min.js"></script> </head> <body> <dd class="password"> <input type="password" name="" placeholder="设置密码：8-16位字母和数字" maxlength="16" style="outline: none;width: 240px;"> <i class="fa fa-eye-slash"></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> |
以上就是本文的全部内容，希望对大家的学习有所帮助
下一篇：js实现动态增加文件域表单功能
