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

网页制作 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.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

效果图：

总结

以上所述是小编给大家介绍的html5仿支付宝密码框的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

html5,支付宝,密码框

标签：

html5,支付宝,密码框

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“html5仿支付宝密码框的实现代码”

暂无html5仿支付宝密码框的实现代码的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

html5,支付宝,密码框

前端面试必备之html5的新特性

HTML5 本地存储实现购物车功能

评论“html5仿支付宝密码框的实现代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

html5,支付宝,密码框

前端面试必备之html5的新特性

HTML5 本地存储实现购物车功能

评论“html5仿支付宝密码框的实现代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存