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);