vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼
輸入框綁定
<input type='phone' placeholder=' 請輸入手機(jī)號' maxlength='13' v-model='phoneNum'/>
監(jiān)聽事件,每次號碼發(fā)生改變時觸發(fā)大體的邏輯是:先比較號碼變化前后的長度,判斷是輸入還是刪除,如果是輸入的話,利用正則表達(dá)式改變號碼格式。
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) { // 驗證/保存的手機(jī)號碼,去除空格 this.state.checkPhoneNum = this.phoneNum.replace(/s/g, ’’) console.log(’輸入的電話號碼是:’, this.state.checkPhoneNum) } } },
效果示意
附錄:下面看下vue手機(jī)號按344分隔,銀行卡號每4位空格分隔
實現(xiàn)效果:
1. 手機(jī)號輸入/粘貼時,不允許輸入數(shù)字外的其它字符,按344分隔,最大輸入11位數(shù)字
2. 銀行卡號輸入/粘貼時,不允許輸入數(shù)字外的其它字符,每四位用空格分隔
代碼:
<template> <div class='form'> <p> 手機(jī)號: <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ù)字,避免刪除到空格時會馬上自動補(bǔ)齊 } } } </script>
上述方案即可實現(xiàn)基本效果,但如果從中間開始刪除或添加內(nèi)容時,光標(biāo)會自動跑到最后,如下:
若想光標(biāo)留在刪除/添加內(nèi)容位置,需要設(shè)置光標(biāo)位置:
修改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è)置光標(biāo)位置 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)!
