js格式化銀行卡號后在中間刪除或增加光標(biāo)移動到最后一位

這是input，因為實際保存的數(shù)據(jù)和顯示數(shù)據(jù)不一樣，所以沒有用model。 現(xiàn)在已經(jīng)可以正常格式化了，四個一空格，但是現(xiàn)在問題是將光標(biāo)放在中間某個地方進行刪除或者增加時，光標(biāo)自動移動到了最后，無法正常在中間進行刪除增加。

     <input name="bank_account" label="銀行卡號" placeholder="僅支持借記卡 將放款至此賬號" type="text" :value="display_bank_account" @blur="handleBankCardBlur" @input="handleBankCardInput" />
     
     
     
     

 handleBankCardInput(val, event) {
      // 初始位置光標(biāo)
      let caret = event.target.selectionStart
      // console.log(caret)
      // 共有n個空格
      let sp = (val.slice(0, caret).match(/\s/g) || []).length
      this.bank_account = val.replace(/\s/g, '')
      this.display_bank_account = val.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
      // 格式化后共有n個空格
      let curSp = (this.display_bank_account.slice(0, caret).match(/\s/g) || []).length
      // console.log(curSp, sp)
      event.target.selectionStart = caret + curSp - sp
      event.target.selectionEnd = caret + curSp - sp
      console.info('caret', caret, 'curSp', curSp, 'sp', sp, 'sum', caret + curSp - sp)
    },

嘗試做了以上工作，但是在pc端測試時，有時候還時會跳到最后，有時候正常，在移動端測試時，光標(biāo)的指向不起作用，每次都是跳到最后。
謝謝。