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

 

posted @ 2018-12-06 23:49 xiaoyan2017 阅读(...) 评论(...) 编辑 收藏
友情链接:andy.Y的技术博客