js格式化银行卡号后在中间删除或增加光标移动到最后一位

Question

这是input，因为实际保存的数据和显示数据不一样，所以没有用model。 现在已经可以正常格式化了，四个一空格，但是现在问题是将光标放在中间某个地方进行删除或者增加时，光标自动移动到了最后，无法正常在中间进行删除增加。

     <input name="bank_account" label="银行卡号" placeholder="仅支持借记卡 将放款至此账号" type="text" :value="display_bank_account" @blur="handleBankCardBlur" @input="handleBankCardInput" />
     
     
     
     

 handleBankCardInput(val, event) {
      // 初始位置光标
      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端测试时，有时候还时会跳到最后，有时候正常，在移动端测试时，光标的指向不起作用，每次都是跳到最后。
谢谢。

Answer 1

我也遇到这个问题了，请问你解决了吗？