htmlcss⽀付页⾯弹出密码框,html5仿⽀付宝密码框的实现代码废话不多说了,直接给⼤家贴代码了,具体代码所⽰:
仿⽀付宝密码框-移动端测
*{
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
.clearfix:after {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
borderbox}
.alieditcontainer {
position: relative;
}
.sixdigitpassword {
position: absolute;
left: -222px;
top: 0;
width: 1000px;
height: 26px;
color: #fff;
font-size: 12px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-user-select: initial;
outline: 'none';
z-index: 999;
opacity: 0;
filter: alpha(opacity=0);
}
.sixdigitpassword-box {
cursor: text;
background: #fff;
outline: none;
position: relative;
padding: 8px 0;
height: 15px;
border: 1px solid #cccccc;
border-radius: 2px;
}
.sixdigitpassword-box i {
float: left;
display: block;
padding: 4px 0;
height: 7px;
border-left: 1px solid #cccccc;
}
.sixdigitpassword-box .active {
background: url('password-blink.gif') no-repeat center center; }
.
sixdigitpassword-box b {
display: block;
margin: 0 auto;
width: 7px;
height: 7px;
overflow: hidden;
visibility: hidden;
background: url('passeord-dot.png') no-repeat;
}
.sixdigitpassword-box span {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 30px;
border: 1px solid rgba(82, 168, 236, .8);
border: 1px solid #00ffff\9;
border-radius: 2px;
visibility: hidden;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.ui-securitycore .ui-form-item .ui-form-explain {
margin-top: 8px;
}
.i-block {
display: inline-block;
}
.six-password {
position: relative;
height: 33px;
width: 182px;
overflow: hidden;
vertical-align: middle;
}
}
⽀付密码:
确认
var _formpay = $('#form_paypsw');
_formpay.validate({
rules: {
'paypassword_rsainput': {
'minlength': 6,
'maxlength': 6,
required: true,
digits: true
}
}
});
var paypassword = $("#paypassword_container"),
_this = paypassword.find('i'),
k = 0,
j = 0,
password = '',
_cardwrap = $('#cardwrap');
//点击隐藏的input密码框,在6个显⽰的密码框的第⼀个框显⽰光标
<('focus', "input[name='paypassword_rsainput']", function() { var _this = paypassword.find('i');
if(paypassword.attr('data-busy') === '0') {
//在第⼀个密码框中添加光标样式
_this.eq(k).addclass("active");
_cardwrap.css('visibility', 'visible');
paypassword.attr('data-busy', '1');
}
});
//change时去除输⼊框的⾼亮,⽤户再次输⼊密码时需再次点击
<('change', "input[name='paypassword_rsainput']", function() { _cardwrap.css('visibility', 'hidden');
_this.eq(k).removeclass("active");
paypassword.attr('data-busy', '0');
}).on('blur', "input[name='paypassword_rsainput']", function() {
_cardwrap.css('visibility', 'hidden');
_this.eq(k).removeclass("active");
paypassword.attr('data-busy', '0');
});
//使⽤keyup事件,绑定键盘上的数字按键和backspace按键
<('keyup', "input[name='paypassword_rsainput']", function(e) { var e = (e) ? e : window.event;
//键盘上的数字键按下才可以输⼊
if(e.keycode == 8 || (e.keycode >= 48 && e.keycode <= 57) || (e.keycode >= 96 && e.keycode <= 105)) {
k = this.value.length; //输⼊框⾥⾯的密码长度
l = _this.size(); //6
for(; l--;) {
//输⼊到第⼏个密码框,第⼏个密码框就显⽰⾼亮和光标(在输⼊框内有2个数字密码,第三个密码框要显⽰⾼亮和光标,之前的显⽰⿊点后⾯的显⽰空⽩,输⼊和删除都⼀样)
if(l === k) {
_this.eq(l).addclass("active");
_this.eq(l).find('b').css('visibility', 'hidden');
} else {
_this.eq(l).removeclass("active");
_this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');
}
if(k === 6) {
j = 5;
} else {
j = k;
}
$('#cardwrap').css('left', j * 30 + 'px');
}
} else {
//输⼊其他字符,直接清空
var _val = this.value;
this.value = _place(/\d/g, '');
}
});
//获取密码
$('.passbtn').on('click', function() {
var reg = new regexp("^[0-9]*$");//验证数字
var pass = $('#paypassword_rsainput').val();
/*pc端测试:主键盘的数字对应的字符对应的keycode相同,所以也可显⽰到框中。但是input中value没有数字,判断⼀下⾮空即可。
*移动端测试: *和#都可输⼊,需正则验证⼀下⾮法字符
* */
if(!pass){

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。