溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何實現vue輸入電話號碼自動按3-4-4分割功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
輸入框綁定
<input class="inputBox" type="phone" placeholder=" 請輸入手機號" maxlength="13" v-model="phoneNum"/>
監聽事件，每次號碼發生改變時觸發
大體的邏輯是：先比較號碼變化前后的長度，判斷是輸入還是刪除，如果是輸入的話，利用正則表達式改變號碼格式。
watch: {
phoneNum (newValue, oldValue) { // 監聽電話號碼
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位空格分隔
實現效果：
1. 手機號輸入/粘貼時，不允許輸入數字外的其它字符，按344分隔，最大輸入11位數字
2. 銀行卡號輸入/粘貼時，不允許輸入數字外的其它字符，每四位用空格分隔
代碼：
<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) // 不允許輸入非數字字符，超過11位數字截取前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, '') // 不允許輸入非數字字符
this.card = this.card.replace(/(\d{4})(?=\d)/g, '$1 ') // 4位一組，非獲取匹配最后一組數字，避免刪除到空格時會馬上自動補齊
}
}
}
</script>上述方案即可實現基本效果，但如果從中間開始刪除或添加內容時，光標會自動跑到最后，如下：
若想光標留在刪除/添加內容位置，需要設置光標位置：
修改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按鍵會導致無法再輸入和刪除內容
let selStart = this.$refs.mobile.selectionStart // 選中區域左邊界位置
let mobileLen = val.length
let value = this.getValue(e, val).substr(0, 11) // 獲取輸入/粘貼內容,并截取前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++
}
// 設置光標位置
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瀏覽器獲取剪貼板數據對象
// event.clipboardData：Chrome, Firefox, Safari獲取剪貼板數據對象
let clipboardData = event.clipboardData || window.clipboardData;
value = clipboardData.getData('Text'); // 獲取剪貼板text格式的數據
value = value.replace(/\D/g, '')
}
return value
}
}
}
</script>看完上述內容，是不是對如何實現vue輸入電話號碼自動按3-4-4分割功能有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
