用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2018-12-17 23:03

微信小程序自定义键盘wcKeyboard|小程序仿微信支付数字密码键盘|仿支付宝支付键盘 微信小程序官方组件里面并没有键盘插件,有时需要用到的话,只能是使用input type=number来唤起系统键盘了,在某些场景下,自定义数 ...

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

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

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

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

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

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

  1. init: function () {
  2. console.log('初始化');
  3. var that = this, opt = that.opts;
  4. // 处理传参
  5. __this.setData({
  6. __options: {
  7. isCloseCls: null,
  8. __idx: __idx,
  9. isShowPopup: true,
  10. //中间值
  11. kbVal: '', //设置调试默认值
  12. err: false, //键盘错误信息提示
  13. debug: opt.debug,
  14. id: opt.id,
  15. type: opt.type,
  16. len: opt.len,
  17. complete: opt.complete,
  18. max: opt.max,
  19. style: opt.style,
  20. skin: opt.skin,
  21. ok: opt.ok,
  22. oninput: opt.oninput,
  23. shade: opt.shade,
  24. shadeClose: opt.shadeClose,
  25. opacity: opt.opacity,
  26. anim: opt.anim
  27. }
  28. });
  29. opt.show && opt.show.call(this);
  30. this.__idx = __idx++;
  31. that.callback();
  32. },
  33. callback: function () {
  34. console.log('事件处理');
  35. var that = this, opt = that.opts;
  36. // 清除上一个timer
  37. clearTimeout(util.timer[that.__idx - 1]);
  38. delete util.timer[that.__idx - 1];
  39. /*
  40. * 键盘处理函数事件 ---------------------------------------
  41. */
  42. // 错误提示
  43. function chkErr(cls, str){
  44. __this.setData({ '__options.err': [cls, str] });
  45. setTimeout(function(){
  46. __this.setData({ '__options.err': false });
  47. }, 2500);
  48. }
  49. // 键盘值检测
  50. function chkVal(text){
  51. if (text.indexOf('.') != -1 && text.substring(text.indexOf('.') + 1, text.length).length == 3) {
  52. return;
  53. }
  54. if (text == '0') {
  55. return;
  56. }
  57. // 输入最大值限制
  58. if (opt.max) {
  59. if (parseInt(text) >= opt.max && text.indexOf('.') == -1) {
  60. chkErr("error", "最大限制值:" + opt.max.toFixed(2));
  61. return;
  62. }
  63. }
  64. // 输入手机号码判断
  65. if (opt.type && opt.type == 'tel') {
  66. var tel = text, _len = parseInt(tel.length), reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
  67. if (_len > 11) return;
  68. if (_len == 11) {
  69. if (!reg.test(tel)) {
  70. chkErr("error", "手机号码格式有误!");
  71. } else {
  72. chkErr("success", "验证通过!");
  73. }
  74. typeof opt.complete == "function" && opt.complete.call(this, text);
  75. }
  76. }
  77. // 输入密码长度判断
  78. if (opt.type && opt.type == 'pwd') {
  79. var _len = parseInt(text.length);
  80. if (_len > opt.len) return;
  81. if (_len == opt.len) {
  82. typeof opt.complete == "function" && opt.complete.call(this, text);
  83. }
  84. }
  85. return true;
  86. }
  87. // 键盘值输出
  88. function setVal(text){
  89. __this.setData({ '__options.kbVal': text });
  90. typeof opt.oninput == "function" && opt.oninput.call(this, text);
  91. }
  92. // 处理数字1-9
  93. __this.tapNum = function(e){
  94. var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  95. var val = kbval + text;
  96. if (!chkVal(val)) return;
  97. setVal(val);
  98. }
  99. // 处理小数点
  100. __this.tapFloat = function(e){
  101. var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  102. if(kbval == '' || kbval.indexOf('.') != -1){
  103. return;
  104. }
  105. var val = kbval + text;
  106. setVal(val);
  107. }
  108. // 处理数字0
  109. __this.tapZero = function(e){
  110. var kbval = this.data.__options.kbVal, text = e.currentTarget.dataset.text;
  111. var val = kbval + text;
  112. if (!chkVal(val)) return;
  113. setVal(val);
  114. }
  115. // 处理删除
  116. __this.tapDel = function(e){
  117. var val = this.data.__options.kbVal.substring(0, this.data.__options.kbVal.length - 1);
  118. setVal(val);
  119. }
  120. // 处理确定按钮事件
  121. __this.tapSure = function(e){
  122. var kbval = this.data.__options.kbVal;
  123. typeof opt.ok == "function" && opt.ok.call(this, kbval);
  124. }
  125. /*
  126. ---------------------------------------
  127. */
  128. // 点击遮罩层关闭
  129. __this.shadeTaped = function (e) {
  130. if (!opt.shadeClose) return;
  131. exportAPI.close(that.__idx);
  132. }
  133. // 点击键盘xclose按钮关闭
  134. __this.xcloseTaped = function(e){
  135. exportAPI.close(that.__idx);
  136. }
  137. // 处理销毁函数
  138. opt.end && (util.end[that.__idx] = opt.end);
  139. }

微信键盘布局view模板:

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

支付宝键盘布局view模板:

  1. class="ul">
  2. class="li kb-limit nbor {{err[0]}}">{{err[1]}}
  3. class="li kb-pwd nbor" wx:if="{{type&&type=='pwd'}}"> class="keyboard__panel-pwd"> class="kb-pwdlbl" wx:for="{{len}}" wx:key="index"> type="password" maxlength="1" value="{{kbVal[index]}}" disabled />
  4. class="li kb-result nbor" style="display:{{debug ? 'block' : 'none'}};">{{kbVal}}
  5. class="kb-flexbox flexbox">
  6. class="kb-one flex1">
  7. class="li kb-number nbor" data-text="1" bind:tap="tapNum">1
  8. class="li kb-number" data-text="2" bind:tap="tapNum">2
  9. class="li kb-number" data-text="3" bind:tap="tapNum">3
  10. class="li kb-number nbor" data-text="4" bind:tap="tapNum">4
  11. class="li kb-number" data-text="5" bind:tap="tapNum">5
  12. class="li kb-number" data-text="6" bind:tap="tapNum">6
  13. class="li kb-number nbor" data-text="7" bind:tap="tapNum">7
  14. class="li kb-number" data-text="8" bind:tap="tapNum">8
  15. class="li kb-number" data-text="9" bind:tap="tapNum">9
  16. class="li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}" data-text="." bind:tap="tapFloat">.
  17. class="li kb-zero" data-text="0" bind:tap="tapZero">0
  18. class="li kb-xclose" bind:touchstart="xcloseTaped"> src="/utils/component/wcKeyboard/img/icon__kb-xclose2.png" mode="aspectFit">
  19. class="kb-two">
  20. class="li kb-del" bind:tap="tapDel"> src="/utils/component/wcKeyboard/img/icon__kb-del.png" mode="aspectFit">
  21. class="li kb-sure" bind:tap="tapSure">确定
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: xiaoyan2015