h5仿支付宝、微信支付数字密码键盘

html5仿微信支付软键盘|仿微信密码键盘|h5仿支付宝付款密码键盘|自定义数字键盘

由于项目需求，需要用到自定义软键盘功能，之前也没有开发过键盘，于是就只能自己收集资料开发，就有了现在这个仿微信、支付宝数字键盘wcKeyboard插件，采用html5+原生javascript开发，内置微信、支付宝两种皮肤风格键盘，可自定义键盘最大值输入限制、显示密码键盘/电话号码键盘验证，并且一个页面可初始化多个键盘输入。

https://www.jianshu.com/u/ca5f4c68e450

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

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

可以自定义数字键盘类型：tel，并且内置手机号码验证规则

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

如果type类型为pwd，则是密码输入键盘

还支持支付宝皮肤数字键盘

// 支付宝键盘风格
$(".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);
});