php支付宝密码框,html5仿支付宝密码框的实现代码

废话不多说了，直接给大家贴代码了，具体代码所示：

仿支付宝密码框-移动端测

*{

margin: 0;

padding: 0;

}

body {

padding: 50px;

}

.clearfix:after {

clear: both;

}

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.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个显示的密码框的第一个框显示光标

payPassword.on('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时去除输入框的高亮，用户再次输入密码时需再次点击

payPassword.on('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按键

payPassword.on('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 = _val.replace(/\D/g, '');

}

});

//获取密码

$('.passBtn').on('click', function() {

var reg = new RegExp("^[0-9]*$");//验证数字

var pass = $('#payPassword_rsainput').val();

/*PC端测试：主键盘的数字对应的字符对应的keyCode相同，所以也可显示到框中。但是input中value没有数字，判断一下非空即可。

*移动端测试： *和#都可输入，需正则验证一下非法字符

* */

if(!pass){

alert('密码为空，请输入密码');

}else if(pass.length < 6){

alert('密码长度为6位');

}else if(!reg.test(pass)){

alert("密码含有非法字符，请重新输入");

}else{

alert(pass);

}

});

需要的资源：

1、jquery-2.1.0.js----版本不限

2、jquery-validate.js----插件

效果图：

总结

以上所述是小编给大家介绍的html5仿支付宝密码框的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！