現在很多地方的注冊都只有一個密碼框，然后再加個顯示/隱藏按鈕，這樣做很簡潔，不用再很繁瑣的輸入兩遍密碼，用戶能自己看到密碼輸入得對不對。所以幻幻也研究了一發實現方案：
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"
);
});
|
效果圖
