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

h5+js 高仿微信支付键盘|微信数字密码键盘|支付宝商铺付款键盘
利用html5开发的仿微信支付数字键盘,密码软键盘插件wcKeyboard,可自定义背景、类型、皮肤,包含微信、支付宝两种皮肤样式,可初始化多个键盘。

h5仿微信支付键盘|仿支付宝数字键盘_第1张图片

h5仿微信支付键盘|仿支付宝数字键盘_第2张图片

h5仿微信支付键盘|仿支付宝数字键盘_第3张图片

h5仿微信支付键盘|仿支付宝数字键盘_第4张图片

h5仿微信支付键盘|仿支付宝数字键盘_第5张图片

h5仿微信支付键盘|仿支付宝数字键盘_第6张图片

h5仿微信支付键盘|仿支付宝数字键盘_第7张图片

h5仿微信支付键盘|仿支付宝数字键盘_第8张图片

h5仿微信支付键盘|仿支付宝数字键盘_第9张图片

/**
 * @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子级元素必须一致 
) 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);

h5仿微信支付键盘|仿支付宝数字键盘_第10张图片

你可能感兴趣的:(h5仿微信支付键盘|仿支付宝数字键盘)