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格式並控制新增和刪除時游標的位置的文章就介紹到這了,更多相關js 手機號碼3-4-4格式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！