• 凝聚着中国智慧中国创造的中国核电将创造更多的中国辉煌。 2019-04-16
  • 高清:四川品胜男篮备战新赛季CBA 2019-04-14
  • 最贵清与奇:冯今松的花鸟图谱 2019-03-29
  • 清明假期山西旅游综合收入37.96亿 接待游客807.22万人次 2019-03-29
  • 马来西亚客机乌俄边界被击落 2019-03-28
  • SUV正常行驶中8个气囊全部弹开 司机吓得跳车逃生 2019-03-28
  • 庆祝人民日报创刊70周年系列访谈之温宪 2019-03-25
  • 琼结强钦青稞酒文化节明日开幕 精彩内容抢先看! 2019-03-25
  • 房产--山西频道--人民网 2019-03-19
  • 川藏兵站部官兵在执行任务中传播党的声音 2019-03-19
  • 第十二届长春消夏节16日启幕 一大波活动等你参与 2019-01-12
  • 比利时VS巴拿马首发公布 卡拉拉斯、维特塞尔中超双子星在列 2019-01-12
  • 螃吖蟹

    山东11选五走势图结果:jQuery仿支付宝6位数字密码框特效代码

    上传于 两年前| 表单|网页特效 |6364 |176
    jQuery仿支付宝6位数字密码框特效代码3683
     体彩11选五走势图 www.fqft.net 实现功能的主要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, '');
        }
    });
    
        立即下载 ( 文件大?。?em>0.04 M)

      浏览器兼容性

      1. IE 8
      2. IE 9
      3. Mozilla Firefox
      4. Google Chrome
      5. Oper
      6. Safari

      技术讨论区

      1. 后知后觉1

        后知后觉

        这个我可以转载吗?

        2017-06-01 16:57:56| 回复

      2. 请先登录

          发 布

      键盘快捷键: 上一个 下一个

    • 凝聚着中国智慧中国创造的中国核电将创造更多的中国辉煌。 2019-04-16
    • 高清:四川品胜男篮备战新赛季CBA 2019-04-14
    • 最贵清与奇:冯今松的花鸟图谱 2019-03-29
    • 清明假期山西旅游综合收入37.96亿 接待游客807.22万人次 2019-03-29
    • 马来西亚客机乌俄边界被击落 2019-03-28
    • SUV正常行驶中8个气囊全部弹开 司机吓得跳车逃生 2019-03-28
    • 庆祝人民日报创刊70周年系列访谈之温宪 2019-03-25
    • 琼结强钦青稞酒文化节明日开幕 精彩内容抢先看! 2019-03-25
    • 房产--山西频道--人民网 2019-03-19
    • 川藏兵站部官兵在执行任务中传播党的声音 2019-03-19
    • 第十二届长春消夏节16日启幕 一大波活动等你参与 2019-01-12
    • 比利时VS巴拿马首发公布 卡拉拉斯、维特塞尔中超双子星在列 2019-01-12