小程序模板網(wǎng)

微信小程序自定義數(shù)字鍵盤|仿支付寶、微信支付數(shù)字軟鍵盤

發(fā)布時間:2018-12-19 09:24 所屬欄目:小程序開發(fā)教程

前幾天有開發(fā)過一個html5仿支付寶、微信支付數(shù)字鍵盤,在某些特定場景下自定義數(shù)字鍵盤應用還是蠻廣泛的,比如 小程序商城系統(tǒng) 需要零錢支付 ,會員卡支付,心想著微信小程序沒有內(nèi)部數(shù)字鍵盤組件,這樣輸入密碼就需要自己做一個自定義軟鍵盤了。于是就在之前插件的基礎上試著開發(fā)出了這個小程序wcKeyboard數(shù)字鍵盤插件。

可以自定義輸入最大值限制,當輸入超過最大值時候,會有警告提示:

還可以自定義鍵盤背景色 style: ' background: xxx; ',最好設置background顏色較淺為佳:

小程序數(shù)字鍵盤插件內(nèi)置手機號碼驗證,當type:'tel'時,輸入手機號碼為11位會自動檢測是否合法:

當配置type:'pwd', 則為密碼鍵盤,可設置密碼位數(shù) len: 6

可以隨意切換微信鍵盤、支付寶鍵盤 skin: wechat/alipay 兩種皮膚風格:

 

  1. init: function () {
    console.log('初始化');
    
    var that = this, opt = that.opts;
    // 處理傳參
    __this.setData({
    __options: {
    isCloseCls: null,
    __idx: __idx,
    isShowPopup: true,
    
    //中間值
    kbVal: '', //設置調(diào)試默認值
    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];
    
    /*
    * 鍵盤處理函數(shù)事件 ---------------------------------------
    */
    // 錯誤提示
    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);
    }
    // 處理數(shù)字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);
    }
    
    // 處理小數(shù)點
    __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);
    }
    
    // 處理數(shù)字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);
    }
    // 處理銷毀函數(shù)
    opt.end && (util.end[that.__idx] = opt.end);
    
    }

微信鍵盤布局view模板:

 

  1. class="ul">
    class="li kb-limit nbor {{err[0]}}">{{err[1]}}
    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 />
    class="li kb-result nbor" style="display:{{debug ? 'block' : 'none'}};">{{kbVal}}
    class="li kb-xclose nbor" bind:touchstart="xcloseTaped"> src="/utils/component/wcKeyboard/img/icon__kb-xclose.png" mode="aspectFit">
    class="li kb-number nbor" data-text="1" bind:tap="tapNum">1
    class="li kb-number" data-text="2" bind:tap="tapNum">2
    class="li kb-number" data-text="3" bind:tap="tapNum">3
    class="li kb-number nbor" data-text="4" bind:tap="tapNum">4
    class="li kb-number" data-text="5" bind:tap="tapNum">5
    class="li kb-number" data-text="6" bind:tap="tapNum">6
    class="li kb-number nbor" data-text="7" bind:tap="tapNum">7
    class="li kb-number" data-text="8" bind:tap="tapNum">8
    class="li kb-number" data-text="9" bind:tap="tapNum">9
    class="li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}" data-text="." bind:tap="tapFloat">.
    class="li kb-zero" data-text="0" bind:tap="tapZero">0
    class="li kb-del" bind:tap="tapDel">×
    
    支付寶鍵盤布局view模板:
 

  1. class="ul">
    class="li kb-limit nbor {{err[0]}}">{{err[1]}}
    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 />
    class="li kb-result nbor" style="display:{{debug ? 'block' : 'none'}};">{{kbVal}}
    
    class="kb-flexbox flexbox">
    class="kb-one flex1">
    class="li kb-number nbor" data-text="1" bind:tap="tapNum">1
    class="li kb-number" data-text="2" bind:tap="tapNum">2
    class="li kb-number" data-text="3" bind:tap="tapNum">3
    class="li kb-number nbor" data-text="4" bind:tap="tapNum">4
    class="li kb-number" data-text="5" bind:tap="tapNum">5
    class="li kb-number" data-text="6" bind:tap="tapNum">6
    class="li kb-number nbor" data-text="7" bind:tap="tapNum">7
    class="li kb-number" data-text="8" bind:tap="tapNum">8
    class="li kb-number" data-text="9" bind:tap="tapNum">9
    class="li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}" data-text="." bind:tap="tapFloat">.
    class="li kb-zero" data-text="0" bind:tap="tapZero">0
    class="li kb-xclose" bind:touchstart="xcloseTaped"> src="/utils/component/wcKeyboard/img/icon__kb-xclose2.png" mode="aspectFit">
    class="kb-two">
    class="li kb-del" bind:tap="tapDel"> src="/utils/component/wcKeyboard/img/icon__kb-del.png" mode="aspectFit">
    class="li kb-sure" bind:tap="tapSure">確定


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25030.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢