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 background属性调整增强介绍
Dec 18 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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日历制作代码分享
2014/01/20 PHP
destoon之一键登录设置
2014/06/21 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
python操作xml文件示例
2014/04/07 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python对常见数据类型的遍历解析
2019/08/27 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
高一自我鉴定
2013/12/17 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
融资合作协议书范本
2014/10/17 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python