h5仿微信支付键盘|仿支付宝数字键盘

h5+js 高仿微信支付键盘|微信数字密码键盘|支付宝商铺付款键盘
利用html5开发的仿微信支付数字键盘，密码软键盘插件wcKeyboard，可自定义背景、类型、皮肤，包含微信、支付宝两种皮肤样式，可初始化多个键盘。

/**
 * @title    数字输入法键盘插件（仿微信支付、支付宝支付数字键盘）
 * @Create    andy
 * @Timer    2018/11/30 10:30:45 GMT+0800 (中国标准时间)
 * @bolg    https://www.cnblogs.com/xiaoyan2017   Q：282310962  wx：xy190310
 */
 
!function(win){
    var _doc = win.document, _docEle = _doc.documentElement, index = 0,
    util = {
        $: function(id){
            return _doc.getElementById(id);
        },
        on: function(o, type, fn){
            o.addEventListener(type||'click', function(e){
                fn.call(this, e);
            }, !1);
        },
        // object扩展
        extend: function(target, source){
            for(var i in source){
                if(!(i in target)){
                    target[i] = source[i];
                }
            }
            return target;
        },
        timer: {},    //定时器
        show: {},    //显示键盘时回调函数
        end: {},    //销毁键盘时回调函数（返回索引值）
    },
    wcKeyboard = function(options){
        var _this = this,
            config = {
                debug: false,
                id: 'wcKeyboard',        //键盘ID标识 (不同ID对应不同键盘)
                selector: '',            //返回值的元素（注意：当type为密码类型，selector子级元素必须一致 <div class="pwdbox"><x></x><x></x><x></x><x></x></div>）
                type: '',                //键盘值类型  选项：tel（手机号码） pwd（密码●）
                len: 6,                    //密码长度
                complete: null,            //密码输入完成回调函数（返回键盘值）
                max: '',                //键盘可输入的最大值
                style: '',                //自定键盘样式
                skin: 'wechat',            //键盘样式    wechat（微信键盘）-默认      alipay（支付宝键盘）
                ok: null,                //确定按钮回调函数
                
                shade: true,            //是否显示遮罩层
                shadeClose: true,        //是否点击遮罩时关闭层
                opacity: '',            //遮罩层透明度
                
                anim: '',                //scaleIn：缩放打开  fadeIn：渐变打开  fadeInDown：底部向上渐变打开  rollIn：左侧翻转打开  shake：震动  footer：底部向上弹出
                zIndex: 9999,            //设置键盘层叠
            };
        
        _this.opts = util.extend(options, config);
        _this.init();
        
        // 禁用掉系统键盘
        document.activeElement.blur();
    };
    
    ...
}(window);