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

网页制作 2024/12/23 佚名

3 2 1

小李飞刀资源网 Design By www.iooab.com

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

<!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----插件

插件代码下载地址：http://xiazai.jb51.net/201709/yuanma/chajian_jb51.rar

效果图：