輸入框綁定

<input type='phone' placeholder=' 請輸入手機號' maxlength='13' v-model='phoneNum'/>

監(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ù)字外的其它字符，每四位用空格分隔

代碼：

<template> <div class='form'> <p> 手機號： <input v-model='mobile' type='tel' ref='mobile' maxlength='13' @keyup='inputMobile' @paste='inputMobile' /> </p> <p> 銀行卡號： <input v-model='card' type='text' @keyup='inputCard' @paste='inputCard' /> </p> </div></template>

js：

<script> export default { data() { return { mobile: ’’, card: ’’ } }, methods: { inputMobile() { let value = this.mobile.replace(/D/g, ’’).substr(0, 11) // 不允許輸入非數(shù)字字符，超過11位數(shù)字截取前11位 let len = value.length if (len > 3 && len < 8) { value = value.replace(/^(d{3})/g, ’$1 ’) } else if (len >= 8) { value = value.replace(/^(d{3})(d{4})/g, ’$1 $2 ’) } this.mobile = value }, inputCard() { this.card = this.card.replace(/D/g, ’’) // 不允許輸入非數(shù)字字符 this.card = this.card.replace(/(d{4})(?=d)/g, ’$1 ’) // 4位一組，非獲取匹配最后一組數(shù)字，避免刪除到空格時會馬上自動補齊 } } } </script>

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

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

修改js如下：

<script> export default { data () { return { mobile: ’’, card: ’’ } }, methods: { inputMobile (e) { this.formatMobile(e) this.mobile = this.$refs.mobile.value }, formatMobile (e) { let val = this.$refs.mobile.value // 不可直接用this.mobile，第一方便提取該方法降低代碼耦合度，第二直接用this.mobile,在輸入漢字時按下shift按鍵會導(dǎo)致無法再輸入和刪除內(nèi)容 let selStart = this.$refs.mobile.selectionStart // 選中區(qū)域左邊界位置 let mobileLen = val.length let value = this.getValue(e, val).substr(0, 11) // 獲取輸入/粘貼內(nèi)容,并截取前11位 let len = value.length if (len > 3 && len < 8) { value = value.replace(/^(d{3})/g, ’$1 ’) } else if (len >= 8) { value = value.replace(/^(d{3})(d{4})/g, ’$1 $2 ’) } this.$refs.mobile.value = value if (selStart !== mobileLen) { if (selStart === 3) { selStart++ } // 設(shè)置光標位置 this.$refs.mobile.selectionStart = this.$refs.mobile.selectionEnd = selStart } }, getValue(e, val) { let value = ’’ if (e.type === ’keyup’) { value = val.replace(/D/g, ’’) } else if (e.type === ’paste’) { // window.clipboardData：IE瀏覽器獲取剪貼板數(shù)據(jù)對象 // event.clipboardData：Chrome, Firefox, Safari獲取剪貼板數(shù)據(jù)對象 let clipboardData = event.clipboardData || window.clipboardData; value = clipboardData.getData(’Text’); // 獲取剪貼板text格式的數(shù)據(jù) value = value.replace(/D/g, ’’) } return value } } }</script>

未實現(xiàn)：

不允許粘貼非數(shù)字內(nèi)容到輸入框還未實現(xiàn)，改為了提交時校驗，如果有比較好的解決方案望大家提出

到此這篇關(guān)于vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue輸入電話號碼自動分割內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！