快捷導(dǎo)航

解決vue 格式化銀行卡(信用卡)每4位一個(gè)符號(hào)隔斷的問題

更新時(shí)間：2018年09月14日 16:13:09 作者：無所事事者愛嘲笑

這篇文章主要介紹了vue 格式化銀行卡（信用卡）每4位一個(gè)符號(hào)隔斷的問題，本文給大家分享了解決方法,需要的朋友可以參考下

問題

在做銀行卡輸入框時(shí)有一個(gè)需求如題，這里舉例用-隔斷

調(diào)查

查看了很多大公司網(wǎng)站的銀行卡輸入，發(fā)現(xiàn)還有有很多缺陷的：
有的是在中間刪除，光標(biāo)會(huì)跳到最后；
有的是能刪除掉中間隔斷符的；
等等，邏輯感覺比較混亂，或者是我不懂他們的高深設(shè)計(jì)吧。

只有支付寶的設(shè)計(jì)感覺是比較合理的，改變了只有輸入框的固有方案，放圖：

上面出現(xiàn)的顯示框不可修改，能清晰看出四位隔斷的格式。

不過為了實(shí)現(xiàn)自己項(xiàng)目只有一個(gè)卡號(hào)輸入框的需求，只能硬著頭皮研究了。

解決

將下面的方法稍作修改綁在輸入框的input方法上就ok了。

改動(dòng)：獲取你自己的input的dom、賦值時(shí)給你自己的data賦值。

// 格式化卡號(hào)顯示，每4位加-
formatCardNumber (cardNum) {
 // 獲取input的dom對(duì)象，這里因?yàn)橛玫氖莈lement ui的input，所以需要這樣拿到
 const input = this.$refs.cardInput.$el.getElementsByTagName('input')[0]
 // 獲取當(dāng)前光標(biāo)的位置
 const cursorIndex = input.selectionStart
 // 字符串中光標(biāo)之前-的個(gè)數(shù)
 const lineNumOfCursorLeft = (cardNum.slice(0, cursorIndex).match(/-/g) || []).length
 // 去掉所有-的字符串
 const noLine = cardNum.replace(/-/g, '')
 // 去除格式不對(duì)的字符并重新插入-的字符串
 const newCardNum = noLine.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/-$/, '')
 // 改后字符串中原光標(biāo)之前-的個(gè)數(shù)
 const newLineNumOfCursorLeft = (newCardNum.slice(0, cursorIndex).match(/-/g) || []).length
 // 光標(biāo)在改后字符串中應(yīng)在的位置
 const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft
 // 賦新值，nextTick保證-不能手動(dòng)輸入或刪除，只能按照規(guī)則自動(dòng)填入
 this.$nextTick(() => {
  this.cardForm.creditCard = newCardNum
  // 修正光標(biāo)位置，nextTick保證在渲染新值后定位光標(biāo)
  this.$nextTick(() => {
   // selectionStart、selectionEnd分別代表選擇一段文本時(shí)的開頭和結(jié)尾位置
   input.selectionStart = newCursorIndex
   input.selectionEnd = newCursorIndex
  })
 })
}

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

ps：

1.此方法如果想在中間刪除隔斷符，光標(biāo)會(huì)前移一位（應(yīng)該也算是正常邏輯吧）。

2.這里用的是element ui，長(zhǎng)度限制在input上做了，這里不對(duì)長(zhǎng)度過多贅述，自行處理。

3.這里間隔符是-，相信大家有改變間隔符的需求，只需把方法里五個(gè)位置的-改為自己的符號(hào)就好了，注意轉(zhuǎn)義（如空格：將-改為\s）

下面看下sublime中有沒有*.vue文件格式化插件

HTML/CSS/JS Prettify 這個(gè)插件就行，安裝后 tools->HTML/CSS/JS Prettify->set prettify preference

在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了

總結(jié)

以上所述是小編給大家介紹的解決vue 格式化銀行卡(信用卡)每4位一個(gè)符號(hào)隔斷的問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: