微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘

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

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

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

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

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

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

init: function (){
console.log('初始化');

var that =this, opt  thatopts;
// 处理传参
__thissetData({
  __options{
    isCloseClsnull    __idx __idx    isShowPopuptrue

    //中间值
    kbVal '' //设置调试默认值
    errfalse//键盘错误信息提示

    debug optdebug

    idid    typetype    lenlen    completecomplete    maxmax    stylestyle    skinskin    okok    oninputoninput    shadeshade    shadeCloseshadeClose    opacityopacity    animanim

  }
});
optshow &&showcall();
__idx ++;
thatcallback();
},0);">{
'事件处理');

;
// 清除上一个timer
clearTimeout(utiltimer[- 1]);
delete util];
/*
  * 键盘处理函数事件 ---------------------------------------
*/
// 错误提示
 chkErrcls str){
  __this({'__options.err']});
  setTimeoutfunction(){
    __thisfalse});
2500}
// 键盘值检测
 chkValtext){
  ifindexOf'.')!=-1 textsubstring+length).length ==3    return;
}
text '0'{
}
  // 输入最大值限制
parseInt>=max {
      chkErr"error""最大限制值："toFixed(2));
      ;
    }
// 输入手机号码判断
type 'tel'{
 tel  _len  parseInttel),0);"> reg /^0?1[3|4|5|8|7][0-9]\d{8}$/;
_len >11;
(!regtest)){
        chkErr"手机号码格式有误！");
      }else"success""验证通过！"typeofcomplete "function");
}
// 输入密码长度判断
'pwd');
}
return// 键盘值输出
 setVal){
'__options.kbVal' text });

oninput // 处理数字1-9
tapNum e){
 kbval data__optionskbVal ecurrentTargetdataset val chkValval;

  setVal}
// 处理小数点
tapFloat ){
ifkbval ''|| kbval){
;
// 处理数字0
tapZero );
}
// 处理删除
tapDel 0);

// 处理确定按钮事件
tapSure ;
ok /*
  ---------------------------------------
*/
// 点击遮罩层关闭
shadeTaped   exportAPIclose__idx// 点击键盘xclose按钮关闭
xcloseTaped // 处理销毁函数
.endend);
}

微信键盘布局view模板：

 class="ul">
    "li kb-limit nbor {{err[0]}}">{{err[1]}}
"li kb-pwd nbor"wx:if"{{type&&type=='pwd'}}">"keyboard__panel-pwd">"kb-pwdlbl"wx:for"{{len}}"wx:key"index">type"password"maxlength"1"value"{{kbVal[index]}}"disabled />
"li kb-result nbor"style"display:{{debug ?'block''none'}};"{{kbVal}}
"li kb-xclose nbor"bind:touchstart"xcloseTaped">src"/utils/component/wcKeyboard/img/icon__kb-xclose.png"mode"aspectFit">
"li kb-number nbor"data-textbind:tap"tapNum"1
"li kb-number""2"2
"3"3
"4"4
"5"5
"6"6
"7"7"8"8
"9"9"li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}"".""tapFloat".
"li kb-zero""0""tapZero"0"li kb-del""tapDel"×

支付宝键盘布局view模板：

"kb-flexBox flexBox">
      "kb-one flex1">
        "li kb-xclose""/utils/component/wcKeyboard/img/icon__kb-xclose2.png">

"kb-two""/utils/component/wcKeyboard/img/icon__kb-del.png">
"li kb-sure""tapSure"确定