問題
在做銀行卡輸入框時有一個需求如題，這里舉例用-隔斷
調查
查看了很多大公司網站的銀行卡輸入，發現還有有很多缺陷的：
有的是在中間刪除，光標會跳到最后；
有的是能刪除掉中間隔斷符的；
等等，邏輯感覺比較混亂，或者是我不懂他們的高深設計吧。
只有支付寶的設計感覺是比較合理的，改變了只有輸入框的固有方案，放圖：
上面出現的顯示框不可修改，能清晰看出四位隔斷的格式。
不過為了實現自己項目只有一個卡號輸入框的需求，只能硬著頭皮研究了。
解決
將下面的方法稍作修改綁在輸入框的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）
下面看下sublime中有沒有*.vue文件格式化插件
HTML/CSS/JS Prettify 這個插件就行， 安裝后 tools->HTML/CSS/JS Prettify->set prettify preference
在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了
總結
以上所述是小編給大家介紹的解決vue 格式化銀行卡(信用卡)每4位一個符號隔斷的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
