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


Posted in HTML / CSS onSeptember 06, 2017

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

<!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.3water.com/201709/yuanma/chajian_3water.rar

效果图:

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

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

总结

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

HTML / CSS 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 #HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 #HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 #HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
You might like
用PHP开发GUI
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
学校门卫管理制度
2014/01/30 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
小学班主任事迹材料
2014/12/17 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript