H5仿原生APP密码输入

效果图

pwd.jpg

实现方式

将input框移出屏幕,用label来代替其捕捉输入动作,监听input的input事件,根据input的值来绘制圆点,具体见下面的代码:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="contain" id="setTradePwd">
<h2>请设置<em>交易密码</em></h2>
<span class="note">交易密码用于理财产品的购买与赎回操作</span>
<input class="pwd-input" type="tel" id="pwdInput1">
<label class="pwd-input-fake" id="pwdInput1Fake" for="pwdInput1">
<span id="pwdInput1P1"></span>
<span id="pwdInput1P2"></span>
<span id="pwdInput1P3"></span>
<span id="pwdInput1P4"></span>
<span id="pwdInput1P5"></span>
<span id="pwdInput1P6"></span>
</label>
</div>

less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@baseFontSize: 20px;
.px2rem(@which, @size) {
@{which}: 1rem * ( @size / @baseFontSize )
}
.pwd-input {
transform: translateY(-500px);//移出屏幕
.px2rem(height, 25px);
}
.pwd-input-fake {
display: inline-block;
.px2rem(height, 42px);
.px2rem(width, 252px);
span {
display: inline-block;
margin: 0;
.px2rem(height, 42px);
.px2rem(width, 42px);
border-top: 1px solid #bcbcbc;
border-bottom: 1px solid #bcbcbc;
border-left: 1px solid #e3e3e3;
position: relative;
&.active:after {
content:'';
.px2rem(height, 10px);
.px2rem(width, 10px);
display: inline-block;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 1rem;
background-color: #000011;
position: absolute;
}
}
span:first-child {
border-left: 1px solid #bcbcbc;
}
span:last-child {
border-right: 1px solid #bcbcbc;
}
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
* 仿原生APP密码输入
* @param id 密码输入input
*/
function imitatePwd(id) {
var defer = $.Deferred();
var pwd = null;
var $span = $('#'+id+'Fake'+' span');
var spanLen = $span.length;
var lastPwdLen = 0;
var active = 0;
$('#'+id).on('input',function() {
pwd = $(this).val();
if (lastPwdLen < pwd.length) {
active += 1;
$('#'+id+'P'+active).addClass('active');
lastPwdLen = pwd.length;
} else {
$('#'+id+'P'+active).removeClass('active');
active -= 1;
lastPwdLen = pwd.length;
}
if (pwd.length == spanLen) {
$(this).attr('disabled', 'disabled');
defer.resolve(pwd);
}
});
return defer.promise();
}
// 使用示范
imitatePwd('pwdInput1')
.then(function(pwd){
alert(pwd)
});