溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JavaScript如何實現手機號碼3-4-4格式并控制新增和刪除時光標的位置，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
JavaScript實現手機號碼 3-4-4格式
手機號實現3-4-4格式相對來說還是比較簡單的，監聽input事件，實時的獲取手機號碼，然后根據手機號碼的長度做截取和拼接的操作，即可實現手機格式的處理，實現格式的處理之后，我們還需要支持在指定光標進行新增和刪除操作的時候光標不移動到最后面，因為手機號的格式使我們重置的，監聽input事件重新賦值之后光標會移動到最后一位，解決這個問題的辦法就是記錄光標的位置并在value值格式重置之后重新設置光標的位置,好了，思路就是這樣的，話不多說，直接上代碼
// An highlighted block
<input
ref="inputRef"
class="life-input"
v-model="value"
:maxlength="13"
:placeholder="哈哈哈哈哈"
:pattern="[0-9]*"
@input="onInput"
/>
// javascript
onInput(){
val = this.value.replace(/\D/g, '').substring(0, 11);
const nowIndex = this.getCursortPosition(this.$refs.inputRef);
if (valueLen > 3 && valueLen < 8) {
this.value = `${val.substr(0, 3)} ${val.substr(3)}`;
} else if (valueLen >= 8) {
this.value = `${val.substr(0, 3)} ${val.substr(
3,
4
)} ${val.substr(7)}`;
} else {
this.value = val;
}
// 重新賦值之后設置光標的位置
this.setCurIndex(nowIndex, this.curInputObj.value);
},
getCursortPosition(element) {
let CaretPos = 0;
if (document.selection) {
// 支持IE
element.focus();
const Sel = document.selection.createRange();
Sel.moveStart('character', -element.value.length);
CaretPos = Sel.text.length;
} else if (element.selectionStart || element.selectionStart === '0'){
// 支持firefox
CaretPos = element.selectionStart;
}
return CaretPos
},
setCurIndex(nowIndex, value) {
const len = value.length;
setTimeout(() => {
let pos = nowIndex;
// 新增操作
if (len > this.oldLen) {
if (nowIndex === 4 || nowIndex === 9) {
pos += 1;
}
} else if (len > this.oldLen) {
// 刪除操作
if (nowIndex === 4 || nowIndex === 9) {
pos -= 1;
}
}
this.$refs.inputRef.selectionStart = pos;
this.$refs.inputRef.selectionEnd = pos;
this.oldLen = this.curInputObj.value.length;
}, 0);
},看完上述內容，是不是對JavaScript如何實現手機號碼3-4-4格式并控制新增和刪除時光標的位置有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
