贼好用的银行卡号/互联网卡号的输入框功能（中间带两个空格）

相信很多干金融或者自带物联网充值系统的小伙伴遇到过头疼的问题。那就是银行卡、互联网卡号的输入框展示，因为每隔几个数字就要空格两位。这样子前后新增、删除的逻辑就变得多了起来。

例：（6666  5555  4444  3333  111）

---以下是我自己进行的处理---

 1.首先先来一波功能样式（也很好用）

// 其中还有一些我其他功能的使用，不用请直接删除掉
// 该功能是使用的vue的vant。
<div class="input-card-number">
    <van-field v-model="cardNumber" type="tel" 
        ref="cardNumberField" :rules="rules" @input="verifyPhone" 
        :maxlength="27" clearable @blur="inputCard(false)"
        placeholder="请输入银行卡卡号"/>
</div>

.input-card-number {
    padding-top: 14px;
    width: 100%;
    height: 70px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background-color: #fff;
    .van-cell {
       border-radius: 20px;
       /deep/ .van-field__control {
           font-size: 18px;
           font-weight: 600;
       }
    }
}

2.重点的来了，是如何处理cardNumber

因为我做的时候功能是从别的页面跳转过来，自带卡号，且还可以进行复制粘贴。所以这里我使用了watch（注：van-field__control这里是input输入框的属性，你可以根据自己的元素进行调整）

watch: {
    cardNumber: {
        handler (newVal, oldVal) {
          if (this.cardNumberType) {
            this.cardNumberType = false // 防抖， 防止逻辑在进行 值的改变，在调取方法。
            let eleLength = document.getElementsByClassName('van-field__control')
            [0].selectionStart // selectionStart 获取输入框的焦点

            var focus = ''
            const tmp = newVal.replace(/\s/g, '') // 去除所有空格
            newVal = this.addSpaces(tmp) // 运用正则表达式， 每四位加两个空格
            // 说明在输入
            if (oldVal.length <= newVal.length) {
              this.cardNumber = newVal
              focus = eleLength == 4 || eleLength == 5 || eleLength == 10 
              || eleLength == 11 || eleLength == 16 || eleLength == 17 
              || eleLength == 22 || eleLength == 23 
              ? eleLength + 2 : eleLength
            } else {
              // 正在删除
              this.cardNumber = newVal.trimEnd() // 去除尾部空格
              focus = eleLength == 6 || eleLength == 12 || eleLength == 18 
              || eleLength == 24 ? eleLength - 2 : eleLength
            }
            // 处理焦点的问题
            // 这里直接干掉焦点
            document.getElementsByClassName('van-field__control')[0].blur();
            this.$nextTick(() => {
              this.cardNumberType = true
              this.getFocus(focus)
            })
          }
        }
      }
},

以上核心的思维

1、获取到输入的/复制来的/页面带来的cardNumber元素，清除它所有的空格newVal.replace(/\s/g, '')

2、利用正则表达式每四位加上一个空格this.addSpaces(tmp)

3、根据新增还是删除做出相应的逻辑处理。

4、这里还需要重新定位一下焦点的位置（因为当6666  5555 红色位置新增的时候会因为后面是空格的原因，焦点直接移植到最末尾。）这里我是先直接把焦点干掉，然后通过计算出应该出现的位置重新附上焦点。这里调取的是this.getFocus

5、因为数据在这个过程中发生了变化，加了一个this.cardNumberType类似防抖的功能，数据处理的时候重新走进来的时候不执行，等数据执行完毕通过nextTick微任务后在放开。

 addSpaces和getFocus方法

// addSpaces 添加空格，每隔4个数字添加两个空格
addSpaces(str) {
   let result = str.replace(/(.{4})/g, '$1  ')
   return result
},

/**
 * @method getFocus 获取焦点
 */
getFocus (focus) {
   let ele = document.getElementsByClassName('van-field__control')[0] // 拿到输入框
   ele.focus() // 重新聚焦输入框
   ele.selectionStart = focus // 当前焦点
   ele.selectionEnd = focus // 当前焦点
},

以上就是该功能的描述，不清除的也可以在评论区说，我会进行回复。还是很好玩的小功能。