vue 輸入框輸入4位一空格，控制16位有效字元

Myrrosego發表於2022-06-24
Vue字元

需求：輸入卡號的時候，四位一空格顯示，控制16位有效字元

實現過程

<input type="tel" v-model="code"  ref="code" @input="cardCount(e)" placeholder="請輸入" />

 解決方法如下：

 cardCount() {
   // 獲取當前游標的位置
  var caret =this.$refs.code.selectionEnd
   // 從左邊沿到座標之間的空格數
  var sp = (this.code.slice(0, caret).match(/\s/g) || []).length
   // 去掉所有空格
  var nospace = this.code.replace(/\s/g, '')
   // 重新插入空格
  this.code= nospace.replace(/\D+/g, '').replace(/(\d{4})/g, '$1 ').trim()
   // 從左邊沿到原座標之間的空格數
  var curSp = (this.code.slice(0, caret).match(/\s/g) || []).length
   // 修正游標位置
  var selectionEnd = caret + curSp - sp
  setTimeout(() => {
    this.$refs.code.setSelectionRange(selectionEnd, selectionEnd)
  }, 0)
 }

原實現方法：缺點刪除一位會錯位

cardCount(e) {
      // 獲取游標
      var pos = e.target.selectionStart
      // 獲取到輸入後的結果
      var value = this.code.replace(/\D/g, '') // 正規表示式：如果輸入框中輸入的不是數字或者空格，將不會顯示；
      // 將結果去掉空格
      value = removeSpace(value)
      // 游標做判斷
      if ((this.keyCode && this.keyCode == 8) || (e.inputType && e.inputType == 'deleteContentBackward')) {
        if (value.length % 4 == 0) {
          pos = pos - 1
        }
      } else {
        if (pos % 4 == parseInt(pos / 4)) {
          pos = pos + 1
        }
      }
      // 判斷長度如果大於16位，擷取前16位
      if (value.length > 16) {
        value = value.substring(0, 16)
      }
      // 將結果加入空格返回
      var newValue = addSpace(value)
      this.code= newValue
      // 移除空格
      function removeSpace(old) {
        return old.replace(/\s/g, '')
      }
      // 每4位新增空格
      function addSpace(old) {
        return old.replace(/(\d{4})(?=\d)/g, '$1 ').trim()
      }
      // 設定游標
      setTimeout(() => {
        // this.$refs.redeem.focus();
        this.$refs.code.setSelectionRange(pos, pos)
      }, 0)
    },

 

相關文章