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

jQuery仿支付宝6位数字密码框特效代码3683
实现功能的主要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': '<i class="icon icon-attention icon-lg"></i> 请填写支付密码',
            'maxlength': '<i class="icon icon-attention icon-lg"></i> 密码最多为{0}个字符',
            'minlength': '<i class="icon icon-attention icon-lg"></i> 密码最少为{0}个字符',
            'digits': '<i class="icon icon-attention icon-lg"></i> 密码只能为数字',
            'numPassword': '<i class="icon icon-attention icon-lg"></i> 连号不可用,相同数字不可用(如:123456,11111)',
            'echoNum': '<i class="icon icon-attention icon-lg"></i> 连号不可用,相同数字不可用(如: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, '');
    }
});

也许你还喜欢