如何實現(xiàn)vue輸入電話號碼自動按3-4-4分割功能

這篇文章主要講解了如何實現(xiàn)vue輸入電話號碼自動按3-4-4分割功能，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供做網(wǎng)站、成都網(wǎng)站制作服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

輸入框綁定

監(jiān)聽事件，每次號碼發(fā)生改變時觸發(fā)
大體的邏輯是：先比較號碼變化前后的長度，判斷是輸入還是刪除，如果是輸入的話，利用正則表達式改變號碼格式。

watch: {
 phoneNum (newValue, oldValue) { // 監(jiān)聽電話號碼
 this.phoneNum = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phoneNum.trim()
 if (this.phoneNum.length === 13) {
 // 驗證/保存的手機號碼，去除空格
 this.state.checkPhoneNum = this.phoneNum.replace(/\s/g, '')
 console.log('輸入的電話號碼是：', this.state.checkPhoneNum)
 } 
 }
 },

效果示意

附錄：下面看下vue手機號按344分隔，銀行卡號每4位空格分隔

實現(xiàn)效果：

1. 手機號輸入/粘貼時，不允許輸入數(shù)字外的其它字符，按344分隔，最大輸入11位數(shù)字

2. 銀行卡號輸入/粘貼時，不允許輸入數(shù)字外的其它字符，每四位用空格分隔

代碼：

js：

上述方案即可實現(xiàn)基本效果，但如果從中間開始刪除或添加內(nèi)容時，光標會自動跑到最后，如下：

若想光標留在刪除/添加內(nèi)容位置，需要設(shè)置光標位置：

修改js如下：

看完上述內(nèi)容，是不是對如何實現(xiàn)vue輸入電話號碼自動按3-4-4分割功能有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。