jQuery仿支付宝6位数字密码框特效代码

实现功能的主要js代码var _formPay = $('#form_paypsw');_formPay.validate({ rules: { 'payPassword_rsainput': { 'minlength': 6, 'maxlength': 6, required: true, digits: true, numPassword: true, echoNum: true } }, messages: { 'payPassword_rsainput': { 'required': ' 请填写支付密码', 'maxlength': ' 密码最多为{0}个字符', 'minlength': ' 密码最少为{0}个字符', 'digits': ' 密码只能为数字', 'numPassword': ' 连号不可用，相同数字不可用（如：123456，11111）', 'echoNum': ' 连号不可用，相同数字不可用（如：123456，11111）' } }, errorPlacement: function (error, element) { element.closest('div[data-error="i_error"]').append(error); }, submitHandler: function (form) { var _form = $(form); form.submit(); }});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, ''); }});

在线演示        积分下载        6毛下载        砍两刀下载