现在很多地方的注册都只有一个密码框，然后再加个显示/隐藏按钮，这样做很简洁，不用再很繁琐的输入两遍密码，用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案：
1. 首先来个密码框
|
1
2
3
4
|
<dd class="password">
<input name="" type="password" class="n-txtCss" placeholder="请输入您的密码" datatype="*6-16" errormsg="密码范围在6~16位之间！" nullmsg="请输入密码！" sucmsg=" " 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");
}); |