JavaScript實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標的位置
JavaScript實現(xiàn)手機號碼 3-4-4格式
手機號實現(xiàn)3-4-4格式相對來說還是比較簡單的,監(jiān)聽input事件,實時的獲取手機號碼,然后根據(jù)手機號碼的長度做截取和拼接的操作,即可實現(xiàn)手機格式的處理,實現(xiàn)格式的處理之后,我們還需要支持在指定光標進行新增和刪除操作的時候光標不移動到最后面,因為手機號的格式使我們重置的,監(jiān)聽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實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標的位置的文章就介紹到這了,更多相關js 手機號碼3-4-4格式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
mui js控制開關狀態(tài)、修改switch開關的值方法
今天小編就為大家分享一篇mui js控制開關狀態(tài)、修改switch開關的值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題
這篇文章主要介紹了BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題,需要的朋友可以參考下2016-12-12webpack項目使用eslint建立代碼規(guī)范實現(xiàn)
這篇文章主要介紹了webpack項目使用eslint建立代碼規(guī)范實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效
這篇文章主要介紹了javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效的相關資料,需要的朋友可以參考下2016-02-02關于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關于layui flow loading占位圖的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09