js实现input密码框显示/隐藏功能

2019-11-19 12:39:42

字体：大中小

来源：转载

供稿：网友

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="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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：深入浅析Node.js 事件循环、定时器和process.nextTick()

下一篇：Vue slot用法(小结)