最近剛開始做小程序弦赖，有個(gè)需求是：用戶輸入兌換碼時(shí)每四位用空格分隔价涝，然后有焦點(diǎn)且有值時(shí)顯示刪除按鈕亡资，失焦點(diǎn)時(shí)隱藏刪除按鈕

image.png

話不多說先開始做炮赦，每四位用空格分隔簡單：
給input標(biāo)簽綁定bindinput事件怜跑，然后在事件里處理

// wxml
<input type="text" value="{{activeCode}}" bindinput="codeInput" bindfocus="focusInput" bindblur="blurInput" placeholder="請(qǐng)輸入兌換碼"/>
<view class="clean" bindtap="clearInput">
    <image class="{{clearShow ? 'show' : ''}}" src="../../common/images/index_clean.png" mode="widthFix"></image>
</view>
// js
codeInput: function(e) {
    var str =value.replace(/\s/g,'').replace(/[^\w\.\/]/g,''); //移除輸入框里的空格和特殊字符
    var newCode = '';
    if(str.length > 16) { // 限制輸入長度
      newCode =str.substr(0,16); 
    }else{
      newCode = str;
    }
    newCode = newCode.replace(/\s/g,'').replace(/[^\w\.\/]/g,'').replace(/(\w{4})(?=\w)/g,"$1 "); // 每四位以空格分隔
// newCode.replace(/\s/g,'').replace(/[^\w\.\/]/g,'').replace(/(\w{4})(?=\w)/g,"$1-"); // 每四位以-分隔
    if(str.length){
        this.setData({
          clearShow: true
        })
    }else{
      this.setData({
          clearShow: false
      })
    }
},
focusInput: function(){
    var code = this.data.activeCode;
    if(code.length){
      this.setData({
        clearShow: true
      })
    }
  },
  blurInput: function(){
    var that = this;
    setTimeout(function(){
      that.setData({
        clearShow: false
      })
    }, 200)
  },

這時(shí)候遇到了一個(gè)問題，就是從中間刪除或輸入的時(shí)候吠勘，光標(biāo)會(huì)置后性芬，跑到最后面...

解決辦法：
利用input標(biāo)簽的cursor屬性
input value和cursor不能用setData賦值，用return

// wxml
   <input type="text" value="{{activeCode}}" bindinput="codeInput" bindfocus="focusInput" bindblur="blurInput" placeholder="請(qǐng)輸入兌換碼" cursor="{{cursor}}" />
// js
   codeInput: function(e) {
        var value = e.detail.value;
        var pos = e.detail.cursor;
        var str =value.replace(/\s/g,'').replace(/[^\w\.\/]/g,'');
        var newCode = '';
        if(str.length > 16) {
          newCode =str.substr(0,16); 
        }else{
          newCode = str;
        }
        var posAfterText = "";
        var posPreText = "";//前面的是否是空格
        var isNextBlank = false;//后面的是否是空格
        var isPreBlank = false;
        var isLastPos = true;
        if (pos != value.length) {//不是最后一個(gè)
            posAfterText = value.substr(pos, 1);
            posPreText = value.substr(pos - 1, 1);
            isNextBlank = /^\s+$/.test(posAfterText);
            isPreBlank = /^\s+$/.test(posPreText);
            isLastPos = false;
        }
        newCode = newCode.replace(/\s/g,'').replace(/[^\w\.\/]/g,'').replace(/(\w{4})(?=\w)/g,"$1 ");
        if(e.detail.keyCode == 8){
        if(str.length){
          this.setData({
            clearShow: true
          })
          this.data.activeCode = newCode
          return {
            value: newCode,
            cursor: e.detail.cursor,
          }
        }else{
          this.setData({
            clearShow: false
          }) 
          this.data.activeCode = newCode
          return {
            value: newCode,
            cursor: e.detail.cursor,
          }
          this.data.activeCode = newCode
        }
      }else{
        this.data.activeCode = newCode
          if(str.length){
            if (!isLastPos) {
              if (isNextBlank) {
                this.setData({
                  clearShow: true,
                })
                return {
                  value: newCode,
                  cursor: pos+1
                }
              } else {
                this.setData({
                clearShow: true,
              })
              return {
                value: newCode,
                cursor: pos
              }
            }
          } else {
            this.setData({
              clearShow: true,
            })
            return {
              value: newCode,
              cursor: pos+1
            }
          }
        } else {
          this.setData({
            clearShow: false
          }) 
          return {
            value: newCode,
            cursor: pos+1
          }
        }
      }
    },