html5仿付款宝登陆密码框的完成编码

日期:2021-02-27 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

空话很少说了,立即给大伙儿贴编码了,实际编码所示:

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF⑻">  
        <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: ⑵22px;  
                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⑵.1.0.js" type="text/javascript" charset="utf⑻"></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个显示信息的登陆密码框的第1个框显示信息光标  
            payPassword.on('focus', "input[name='payPassword_rsainput']", function() {  
                var _this = payPassword.find('i');  
                if(payPassword.attr('data-busy') === '0') {  
                    //在第1个登陆密码框中加上光标款式  
                    _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个数据登陆密码,第3个登陆密码框要显示信息高亮度和光标,以前的显示信息斑点后边的显示信息空白,键入和删掉都1样)  
                        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⑼]*$");//认证数据  
                var pass = $('#payPassword_rsainput').val();  
                /*PC端检测:主电脑键盘的数据对应的标识符对应的keyCode同样,因此也可显示信息到框中。可是input中value沒有数据,分辨1下非空便可。  
                 *挪动端检测: *和#都可以键入,需正则表达式认证1下不法标识符  
                 * */  
                if(!pass){  
                    alert('登陆密码为空,请键入登陆密码');  
                }else if(pass.length < 6){  
                    alert('登陆密码长度为6位');  
                }else if(!reg.test(pass)){  
                    alert("登陆密码含有不法标识符,请再次键入");  
                }else{  
                    alert(pass);  
                }  
            });  
        </script>  
    </body>  
</html> 

必须的資源:

1、jquery⑵.1.0.js----版本号不限

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

软件编码免费下载详细地址:http://xiazai.jb51.net/201709/yuanma/chajian_jb51.rar

实际效果图:


 

总结

以上所述是网编给大伙儿详细介绍的html5仿付款宝登陆密码框的完成编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:详解H5当地存储Web Storage 返回下一篇:没有了