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

现在很多地方的注册都只有一个密码框，然后再加个显示/隐藏按钮，这样做很简洁，不用再很繁琐的输入两遍密码，用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案：

1. 首先来个密码框

1 2 3 4

<dd class="password">     <input name="" type="password" class="n-txtCss" placeholder="请输入您的密码" datatype="*6-16" errormsg="密码范围在6~16位之间！" nullmsg="请输入密码！" sucmsg="&nbsp;" maxlength="16" plugin="passwordStrength">     <i class="fa fa-eye-slash"></i> </dd>

2.CSS

让显示/隐藏按钮放在密码框的最右侧

1 2 3 4 5 6 7 8 9 10 11 12 13

.password{     position: relative; } .password .n-txtCss{     width:90% !important; } .password .fa{     position: absolute;     right: 10px;     top:15px;     font-size: 20px;     cursor: pointer; }

3.JS实现

1 2 3 4 5 6 7 8 9

$(".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"); });

效果图

转自  ： https://www.reinforce.cn/t/569.html