h5仿微信、支付寶數字鍵盤|微信支付鍵盤|支付寶付款鍵盤

html5仿微信支付數字鍵盤|仿支付寶鍵盤|h5仿微信密碼輸入鍵盤|自定義數字鍵盤

很早以前因爲項目需求，就有開發過一個h5仿微信支付鍵盤，這幾天就把以前的數字鍵盤模塊獨立出來，從新整理開發成demo，採用h5+原生js開發，含有微信、支付寶兩種鍵盤皮膚，可自定義普通鍵盤、最大值輸入限制、密碼鍵盤/電話號碼鍵盤驗證，一個頁面可初始化多個鍵盤且輸入互不衝突。

插件使用至關方便，只需引入 <script src="wcKeyboard.js"></script>

// 賦值給input
$("#wcKeyboardInput01").on("click", function(){
    wcKeyboard({
        id: 'kbInput01',
        selector: '#wcKeyboardInput01',
        max: 99999.99,
        
        shade: true,
        
        anim: 'footer',
    });
});

h5仿微信、支付寶鍵盤demo效果圖：

手機號碼輸入鍵盤，內置手機驗證規則：

// 輸入手機號碼
$("#wcKeyboardInput04").on("click", function(){
    wcKeyboard({
        id: 'kbInput04',
        selector: '#wcKeyboardInput04',
        type: 'tel',
        complete: function(val){
            alert("輸入的手機號碼：" + val);
        },
        
        shade: false,
        
        anim: 'footer'
    });
});

還支持支付寶數字鍵盤風格皮膚：

// 支付寶鍵盤風格
$(".wcKeyboardInput06").on("click", function(){
    wcKeyboard({
        id: 'kbInput06',
        selector: '.wcKeyboardInput06',
        max: 10000,
        style: '',
        skin: 'alipay',
        
        shadeClose: false,
        opacity: .2,
        
        anim: 'fadeIn',
    });
});

// 處理數字1-9
for (var o = _obj.getElementsByClassName("kb-number"), len = o.length, i = 0; i < len; i++)
    util.touch(o[i], "click", function(e){
        var text = res_obj.innerHTML + this.innerHTML;
        if(!chkVal(text)) return;
        
        res_obj.innerHTML = text;
        setVal(res_obj.innerHTML);
    });

// 處理小數點
var _float = _obj.getElementsByClassName("kb-float")[0];
util.touch(_float, "click", function(){
    var text = res_obj.innerHTML;
    if(text == '' || text.indexOf('.') != -1){
        return;
    }
    res_obj.innerHTML = res_obj.innerHTML + this.innerHTML;
    setVal(res_obj.innerHTML);
});

// 處理數字0
var _zero = _obj.getElementsByClassName("kb-zero")[0];
util.touch(_zero, "click", function(){
    var text = res_obj.innerHTML + this.innerHTML;
    if(!chkVal(text)) return;
    
    res_obj.innerHTML = text;
    setVal(res_obj.innerHTML);
});

// 處理刪除
var _del = _obj.getElementsByClassName("kb-del")[0];
util.touch(_del, "click", function(){
    res_obj.innerHTML = res_obj.innerHTML.substring(0, res_obj.innerHTML.length - 1);
    setVal(res_obj.innerHTML);
});