vue 格式化銀行卡（信用卡）每4位一個符號隔斷

問題

在作銀行卡輸入框時有一個需求如題，這裏舉例用-隔斷

調查

查看了不少大公司網站的銀行卡輸入，發現還有有不少缺陷的：
有的是在中間刪除，光標會跳到最後；
有的是能刪除掉中間隔斷符的；
等等，邏輯感受比較混亂，或者是我不懂他們的高深設計吧。
只有支付寶的設計感受是比較合理的，改變了只有輸入框的固有方案，放圖：

上面出現的顯示框不可修改，能清晰看出四位隔斷的格式。
不過爲了實現本身項目只有一個卡號輸入框的需求，只能硬着頭皮研究了。

解決

將下面的方法稍做修改綁在輸入框的input方法上就ok了。
改動：獲取你本身的input的dom、賦值時給你本身的data賦值。

// 格式化卡號顯示，每4位加-
formatCardNumber (cardNum) {
// 獲取input的dom對象，這裏由於用的是element ui的input，因此須要這樣拿到
const input = this.$refs.cardInput.$el.getElementsByTagName('input')[0]
// 獲取當前光標的位置
const cursorIndex = input.selectionStart
// 字符串中光標以前-的個數
const lineNumOfCursorLeft = (cardNum.slice(0, cursorIndex).match(/-/g) || []).length
// 去掉全部-的字符串
const noLine = cardNum.replace(/-/g, '')
// 去除格式不對的字符並從新插入-的字符串
const newCardNum = noLine.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/-$/, '')
// 改後字符串中原光標以前-的個數
const newLineNumOfCursorLeft = (newCardNum.slice(0, cursorIndex).match(/-/g) || []).length
// 光標在改後字符串中應在的位置
const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft
// 賦新值，nextTick保證-不能手動輸入或刪除，只能按照規則自動填入
this.$nextTick(() => {
this.cardForm.creditCard = newCardNum
// 修正光標位置，nextTick保證在渲染新值後定位光標
this.$nextTick(() => {
// selectionStart、selectionEnd分別表明選擇一段文本時的開頭和結尾位置
input.selectionStart = newCursorIndex
input.selectionEnd = newCursorIndex
})
})
}

這裏就不作封裝了，可自封，例：formatBankCard(dom, dataName, cardNum, breaker)

ps：

1. 此方法若是想在中間刪除隔斷符，光標會前移一位（應該也算是正常邏輯吧）。
2. 這裏用的是element ui，長度限制在input上作了，這裏不對長度過多贅述，自行處理。
3. 這裏間隔符是-，相信你們有改變間隔符的需求，只需把方法裏五個位置的-改成本身的符號就行了，注意轉義（如空格：將-改成\s） 若有不足，請留言斧正，十分感謝！