this is input, because the actual saved data is different from the displayed data, so model is not used. Now it can be formatted normally, four spaces in one space, but now the problem is that when you place the cursor somewhere in the middle to delete or add, the cursor automatically moves to the end, unable to delete and add normally in the middle.
<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)
}, tried to do the above work, but when testing on the PC side, sometimes it skips to the end, sometimes it is normal, when testing on the mobile side, the pointing of the cursor does not work, and it always jumps to the end.
Thank you.