欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-02 23:23:16
本文通过实例代码给大家介绍了html5仿支付宝密码框效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧... 17-09-06...

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

<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>仿支付宝密码框-移动端测</title>  
        <style type="text/css">  
            *{  
                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;  
            }  
        }  
        </style>  
    </head>  
    <body>  
        <form action="" method="post" name="paypassword" id="form_paypsw">  
            <div id="paypassword_container" class="alieditcontainer clearfix" data-busy="0">  
                <label for="i_paypassword" class="i-block">支付密码:</label><br />  
                <div class="i-block" data-error="i_error">  
                    <div class="i-block six-password">  
                        <input class="i-text sixdigitpassword" id="paypassword_rsainput" type="tel" autocomplete="off" required="required" value="" name="paypassword_rsainput" data-role="sixdigitpassword" tabindex="" maxlength="6" minlength="6" aria-required="true">  
                        <div tabindex="0" class="sixdigitpassword-box" style="width: 180px;">  
                            <i style="width: 29px; border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>  
                            <i style="width: 29px;"><b style="visibility: hidden;"></b></i>  
                            <i style="width: 29px;"><b style="visibility: hidden;"></b></i>  
                            <i style="width: 29px;"><b style="visibility: hidden;"></b></i>  
                            <i style="width: 29px;"><b style="visibility: hidden;"></b></i>  
                            <i style="width: 29px;"><b style="visibility: hidden;"></b></i>  
                            <span style="width: 29px; left: 0px; visibility: hidden;" id="cardwrap" data-role="cardwrap"></span>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </form>  
        <button class="passbtn" style="margin-top:20px;">确认</button>  
        <script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>  
        <script src="jquery-validate.js" type="text/javascript"></script>  
        <script type="text/javascript">  
            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);  
                }  
            });  
        </script>  
    </body>  
</html> 

需要的资源:

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

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

插件代码下载地址:

效果图:

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

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

总结

以上所述是小编给大家介绍的html5仿支付宝密码框的实现代码,希望对大家有所帮助