前几天有开发过一个html5仿支付宝、微信支付数字键盘，在某些特定场景下自定义数字键盘应用还是蛮广泛的，比如 小程序商城系统 需要零钱支付 ,会员卡支付，心想着微信小程序没有内部数字键盘组件，这样输入密码就需要自己做一个自定义软键盘了。于是就在之前插件的基础上试着开发出了这个小程序wcKeyboard数字键盘插件。

可以自定义输入最大值限制，当输入超过最大值时候，会有警告提示：

还可以自定义键盘背景色 style: ' background: xxx; '，最好设置background颜色较浅为佳：

小程序数字键盘插件内置手机号码验证，当type:'tel'时，输入手机号码为11位会自动检测是否合法：

当配置type:'pwd'， 则为密码键盘，可设置密码位数 len: 6

可以随意切换微信键盘、支付宝键盘 skin: wechat/alipay 两种皮肤风格：

init: function () {
console.log('初始化');
 
var that = this, opt = that.opts;
// 处理传参
__this.setData({
  __options: {
    isCloseCls: null,
    __idx: __idx,
    isShowPopup: true,
 
    //中间值
    kbVal: '', //设置调试默认值
    err: false, //键盘错误信息提示
 
    debug: opt.debug,
 
    id: opt.id,
    type: opt.type,
    len: opt.len,
    complete: opt.complete,
    max: opt.max,
    style: opt.style,
    skin: opt.skin,
    ok: opt.ok,
    oninput: opt.oninput,
 
    shade: opt.shade,
    shadeClose: opt.shadeClose,
    opacity: opt.opacity,
 
    anim: opt.anim
  }
});
 
opt.show && opt.show.call(this);
this.__idx = __idx++;
that.callback();
},
callback: function () {
console.log('事件处理');
 
var that = this, opt = that.opts;
// 清除上一个timer
clearTimeout(util.timer[that.__idx - 1]);
delete util.timer[that.__idx - 1];
 
/*
  * 键盘处理函数事件 ---------------------------------------
*/
// 错误提示
function chkErr(cls, str){
  __this.setData({ '__options.err': [cls, str] });
  setTimeout(function(){
    __this.setData({ '__options.err': false });
  }, 2500);
}
// 键盘值检测
function chkVal(text){
  if (text.indexOf('.') != -1 && text.substring(text.indexOf('.') + 1, text.length).length == 3) {
    return;
  }
  if (text == '0') {
    return;
  }
  // 输入最大值限制
  if (opt.max) {
    if (parseInt(text) >= opt.max && text.indexOf('.') == -1) {
      chkErr("error", "最大限制值：" + opt.max.toFixed(2));
      return;
    }
  }
  // 输入手机号码判断
  if (opt.type && opt.type == 'tel') {
    var tel = text, _len = parseInt(tel.length), reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    if (_len > 11) return;
 
    if (_len == 11) {
      if (!reg.test(tel)) {
        chkErr("error", "手机号码格式有误！");
      } else {
        chkErr("success", "验证通过！");
      }
      typeof opt.complete == "function" && opt.complete.call(this, text);
    }
  }
  // 输入密码长度判断
  if (opt.type && opt.type == 'pwd') {
    var _len = parseInt(text.length);
    if (_len > opt.len) return;
    if (_len == opt.len) {
      typeof opt.complete == "function" && opt.complete.call(this, text);
    }
  }
  return true;
}
// 键盘值输出
function setVal(text){
  __this.setData({ '__options.kbVal': text });
 
  typeof opt.oninput == "function" && opt.oninput.call(this, text);
}
// 处理数字1-9
__this.tapNum = function(e){
  var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  var val = kbval + text;
  if (!chkVal(val)) return;
 
  setVal(val);
}
 
// 处理小数点
__this.tapFloat = function(e){
  var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  if(kbval == '' || kbval.indexOf('.') != -1){
    return;
  }
  var val = kbval + text;
  setVal(val);
}
 
// 处理数字0
__this.tapZero = function(e){
  var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  var val = kbval + text;
  if (!chkVal(val)) return;
 
  setVal(val);
}
 
// 处理删除
__this.tapDel = function(e){
  var val = this.data.__options.kbVal.substring(0, this.data.__options.kbVal.length - 1);
  setVal(val);
}
 
// 处理确定按钮事件
__this.tapSure = function(e){
  var kbval = this.data.__options.kbVal;
  typeof opt.ok == "function" && opt.ok.call(this, kbval);
}
 
 
/*
  ---------------------------------------
*/
// 点击遮罩层关闭
__this.shadeTaped = function (e) {
  if (!opt.shadeClose) return;
  exportAPI.close(that.__idx);
}
// 点击键盘xclose按钮关闭
__this.xcloseTaped = function(e){
  exportAPI.close(that.__idx);
}
// 处理销毁函数
opt.end && (util.end[that.__idx] = opt.end);
 
}