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

xiaoyan2017 2018-12-06 原文

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