微信小程式自定義鍵盤外掛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: 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);

}
 

<!-- //支付寶鍵盤佈局 -->
<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>