微信小程序自定义键盘插件wcKeyboard|仿微信数字软键盘|仿支付宝自定义数字键盘|小程序自定义模拟系统键盘
前段时间有开发过一个html5仿支付宝、微信支付数字键盘，在某些情况下自定义数字键盘应用还是蛮多的，比如 购物商城系统 零钱付款 ,会员卡支付，恰好微信小程序没有内部数字键盘组件，这样输入密码就需要自己做一个自定义软键盘了。于是就在之前插件的基础上试着开发出了这个小程序wcKeyboard数字键盘插件。
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: plete,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;// 清除上一个timerclearTimeout(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 plete == "function" && plete.call(this, text);}}// 输入密码长度判断if (opt.type && opt.type == 'pwd') {var _len = parseInt(text.length);if (_len > opt.len) return;if (_len == opt.len) {typeof plete == "function" && plete.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);}
<!-- //支付宝键盘布局 --><view class="ul"><view class="li kb-limit nbor {{err[0]}}">{{err[1]}}</view><view class="li kb-pwd nbor" wx:if="{{type&&type=='pwd'}}"><view class="keyboard__panel-pwd"><label class="kb-pwdlbl" wx:for="{{len}}" wx:key="index"><input type="password" maxlength="1" value="{{kbVal[index]}}" disabled /></label></view></view><view class="li kb-result nbor" style="display:{{debug ? 'block' : 'none'}};">{{kbVal}}</view><view class="kb-flexbox flexbox"><view class="kb-one flex1"><view class="li kb-number nbor" data-text="1" bind:tap="tapNum">1</view><view class="li kb-number" data-text="2" bind:tap="tapNum">2</view><view class="li kb-number" data-text="3" bind:tap="tapNum">3</view><view class="li kb-number nbor" data-text="4" bind:tap="tapNum">4</view><view class="li kb-number" data-text="5" bind:tap="tapNum">5</view><view class="li kb-number" data-text="6" bind:tap="tapNum">6</view><view class="li kb-number nbor" data-text="7" bind:tap="tapNum">7</view><view class="li kb-number" data-text="8" bind:tap="tapNum">8</view><view class="li kb-number" data-text="9" bind:tap="tapNum">9</view><view class="li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}" data-text="." bind:tap="tapFloat">.</view><view class="li kb-zero" data-text="0" bind:tap="tapZero">0</view><view class="li kb-xclose" bind:touchstart="xcloseTaped"><image src="/utils/component/wcKeyboard/img/icon__kb-xclose2.png" mode="aspectFit"></image></view></view><view class="kb-two"><view class="li kb-del" bind:tap="tapDel"><image src="/utils/component/wcKeyboard/img/icon__kb-del.png" mode="aspectFit"></image></view><view class="li kb-sure" bind:tap="tapSure">确定</view></view></view></view>
