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