• 移动端键盘密码输入框插件(jquery用于支付密码)


    最后生成样子:

    配置值:

      

    * back {function} 回调函数
    * msghtml {html} 自定义的html
    * title {string|object} 标题
    * {txt:标题,back:后退按钮}
    * 字符串则只有标题,有back字段对象则有后退按钮
    * sum {int} 输入的数字长度
    * close {string} 关闭按钮的class类(有默认类名)
    * cancel {string} 撤销重新输入按钮

    js

     function ztkeyboard(options){
        let create =  function(){
            this.options = {
                'msghtml':options.msghtml||'',
                'title':options.title||'',
                'sum':options.sum,
                'close':$(options.close)||'',
                'cancel':$(options.cancel)||'',
            };
            this.init();
            this.show();
            this.click();
            this.close();
            this.delete();
        };
        create.prototype.init = () => {
            let pd='';//密码长度
            let keybord = '';//键盘按键
            for(var i=0;i<options.sum;i++){
                pd += `<span class="pd fl" dataval="">*</span>`;
            };
            for(var i=0;i<9;i++){
                keybord+= `<div class="fl key"><a class="btn" href="javascript:;">${i+1}</a></div>`
            }
            $('body').append(
                `<div id="keyboard-box" style='display:none'>
                        <div id="keyboard">
                            <div class="title">
                                <em class="fl back iconfont ${options.close}"></em>
                                <span class="tit-txt">
                                    ${options.title}
                                </span>
                            </div>
                            <div class="con-box fn-clear">
                                ${pd}
                            </div>
                            ${options.msghtml}
                                <div class="keybord fn-clear">
                                    ${keybord}
                                    <div class="fl block"></div>
                                    <div class="fl key"><a class="btn" href="javascript:;">0</a></div>
                                    <div class="fl key close-keybord">
                                        <a href="javascript:;" class="iconfont ${options.cancel}"></a>
                                    </div>
                                </div>
                        </div>
                    </div>
                `
            );
            // 防止冒泡
            $('#keyboard-box').on('touchmove',function(e){
                e.preventDefault();
            })
        };
        // 键盘点击
        create.prototype.click = () => {
            $(".keybord .btn").on('click',function(){
                let index = $('.pd.fl.sure').index();
                let aim = $('.pd.fl.sure').length;
                if(index!=-1&&aim<`${options.sum}`){
                    $('.pd.fl').eq(aim).addClass('sure').attr('val',this.text);
                    if(aim==`${options.sum}`-1){
                        let password = '';
                        $('.pd.fl').each(function(i,datas){
                            password+=$(datas).attr('val');
                        })
                        create.prototype.back(password);//使用回调
                        $('#keyboard-box').fadeOut(500,function(){
                            $('#keyboard-box').remove();//清除元素
                        });
                    }
                }else if(index==-1){
                    $('.pd.fl').eq(0).addClass('sure').attr('val',this.text);
                }
            })
        };
        //撤销按钮
        create.prototype.delete = () => {
            $('.close-keybord .iconfont').on('click',function(){
                let aim = $('.pd.fl.sure').length;
                $('.pd.fl').eq(aim-1).removeClass('sure').attr('val','');
            })
        };
        // 显示对象
        create.prototype.show = () => {
            $('#keyboard-box').fadeIn(500);
        }
        // 取消对象创建
        create.prototype.close = () => {
            $('#keyboard .title .back').on('click',function(){
                $('#keyboard-box').fadeOut(100,function(){
                    $('#keyboard-box').remove();//清除元素
                });
            })
        },
        // 回调函数(传递输入的密码给前台)
        create.prototype.back = (password) => {
            typeof(options.back)==="function"?options.back(password):'undefined';
        };
        return new create();
     }

    html调用方法

            ztkeyboard({
                msghtml:'<a class="forget-pwd" href="">忘记密码?</a>',
                title:'请输入支付密码',
                close:'icon-houtui',
                sum:6,
                cancel:'icon-chexiao',
                back:function(data){
                    console.log(data)
                    console.log('提交支付密码表单')
                }
            })

    css(less)

    @r:75rem;
    @basecolor:#51d392;
    /* 方法库 */
    @import url("http://at.alicdn.com/t/font_903282_qp1m330oew.css");
    #keyboard-box{
        position: fixed;
        display: block;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        background-color: rgba(0,0,0,0.2);
        #keyboard{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 880/@r;
            left: 0;
            background-color: #fff;
            .title{
                line-height: 92/@r;
                border-bottom: 1px solid #cacaca;
                position: relative;
                box-sizing: border-box;
                .fl{
                    position: absolute;
                    font-size:34/@r;
                    color: #939395;
                    padding-left: 40/@r;
                }
                .tit-txt{
                    font-size: 38/@r;
                    color: #333;
                    text-align: center;
                    display: block;
    
                }
            }
            .con-box{
                margin: 48/@r 32/@r 0 32/@r;
                display:flex;
                height: 94/@r;
                border: 1px solid #a2a2a4;
                border-radius: 10/@r;
                .pd{
                    flex-grow: 1;
                    text-align: center;
                    font-size: 60/@r;
                    line-height: 94/@r;
                    color: #fff;
                }
                .pd:not(:last-child){
                    border-right: 1px solid #a2a2a4;
                }
                .pd.sure{
                    flex-grow: 1;
                    text-align: center;
                    font-size: 60/@r;
                    line-height: 94/@r;
                    color: #333;
                }
            }
            .forget-pwd{
                margin-top: 36/@r;
                margin-bottom: 150/@r;
                color: #0e8fe2;
                display: block;
                text-align: center;
            }
            .keybord{
                padding: 12/@r 12/@r 4/@r 12/@r;
                background-color: #d0d3da;
                .fl{
                    width: 33%;
                    height: 92/@r;
                    display: inline-block;
                    text-align: center;
                    color: #333;
                    padding-bottom: 12/@r;
                    line-height: 92/@r;
                    cursor: pointer;
                    font-size:40/@r;
                }
                .btn{
                    display: block;
                    border-radius: 10/@r;
                    height: 92/@r;
                    line-height: 92/@r;
                    background-color: #fff;
                    margin: 0 6/@r;
                    color: #333;
                    box-shadow: 0px 10/@r 10/@r #88878c;
                }
                .close-keybord .iconfont{
                    color: #333;
                    font-size:60/@r;
                    display: block;
                }
            }
        }
    }
  • 相关阅读:
    django中的自定义标签与过滤器,静态文件配置,orm前戏
    JavaScript(js)运算符
    JavaScript(js)字面量,函数写法
    JavaScript(js)的4中输出方式
    JavaScript(js)的学习使用样式,核心语法,数据类型
    标签链接、表单及css部分知识
    学习html5 附代码
    automationOperationsWithPython
    0821 1336 模块与包的导入方法、常用模块介绍
    0816 1459 json & pickle ,目录导入,目录规范
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/9909486.html
Copyright © 2020-2023  润新知