jq移动端 输入支付密码

转发原地址：https://www.cnblogs.com/NB-JDzhou/p/9909486.html  感谢博主！！

原创博主css单位用的用的rem，我这里用的是em  16px=1em；

实现样子

css

 /*输入支付密码*/
        #keyboard-box{position: fixed; display: block; width: 100%; left: 0; top: 0; height: 100%; background-color: rgba(0,0,0,0.2);}
        #keyboard-box #keyboard{position: absolute; bottom: 0; width: 100%; left: 0; background-color: #fff;}
        #keyboard-box #keyboard .title{line-height: 3em; border-bottom: 1px solid #cacaca; position: relative; box-sizing: border-box;}
        #keyboard-box #keyboard .title .fl{position: absolute; font-size:1em; color: #939395; padding-left:1em; }
        #keyboard-box #keyboard .title .tit-txt{font-size: 1em; color: #333; text-align: center; display: block;}
        #keyboard-box #keyboard .con-box{margin: 2em 1em 0 1em; display:flex; height:3em; border: 1px solid #a2a2a4; border-radius: 0.4em;}
        #keyboard-box #keyboard .con-box .pd{flex-grow: 1; text-align: center; font-size: 1em; line-height: 3em; color: #fff;}
        #keyboard-box #keyboard .con-box .pd:not(:last-child){border-right: 1px solid #a2a2a4;}
        #keyboard-box #keyboard .con-box .pd.sure{flex-grow: 1; text-align: center; font-size: 1em; line-height: 3em; color: #333;}
        #keyboard-box #keyboard .forget-pwd{margin-top: 1em; margin-bottom:4em; color: #0e8fe2; display: block; text-align: center;font-size: 0.85em;}
        #keyboard-box #keyboard .keybord{padding:0.4em 0.4em 0.1em 0.4em; background-color: #d0d3da;}
        #keyboard-box #keyboard .keybord .fl{width: 33%; height: 3em; display: inline-block; text-align: center; color: #333; padding-bottom: 0.4em; line-height:3em; cursor: pointer; font-size:1em;}
        #keyboard-box #keyboard .keybord .ft{float: left;}
        #keyboard-box #keyboard .keybord .btn{display: block; border-radius: 0.4em; height: 3em; line-height:3em; background-color: #fff; margin: 0 0.2em; color: #333; box-shadow: 0px 0.2em 0.2em #88878c;}
        #keyboard-box #keyboard .keybord .close-keybord .iconfont{color: #333; font-size:1em; display: block;}

js

阿里云矢量图标：http://at.alicdn.com/t/font_1069844_180eng5046s.css

//点击调用下列代码
ztkeyboard({
  msghtml:'<a class="forget-pwd">忘记密码?</a>',
     title:'请输入支付密码',
     close:'icon-icon-houtui',//阿里云矢量图标
     sum:6,
     cancel:'icon-icon_chexiaoann',//阿里云矢量图标
     back:function(data){
          console.log(data);
          console.log("支付密码输入完毕执行")
     }
 })

js方法

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

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 ft"></div>
                                <div class="fl key ft"><a class="btn" href="javascript:;">0</a></div>
                                <div class="fl key close-keybord ft">
                                    <a href="javascript:;" class="iconfont ${options.cancel}"></a>
                                </div>
                                <div class="clear"></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);
            }
        })

        $(".forget-pwd").on('click',function(){
            window.location.href="../my_install_safe_pas.php?type=2"
        })
    };
    //撤销按钮
    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();
 }