JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
JavaScript实现手机号码3-4-4格式
手机号实现3-4-4格式相对来说还是比较简单的，监听input事件，实时的获取手机号码，然后根据手机号码的长度做截取和拼接的操作，即可实现手机格式的处理，实现格式的处理之后，我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面，因为手机号的格式使我们重置的，监听input事件重新赋值之后光标会移动到最后一位，解决这个问题的办法就是记录光标的位置并在value值格式重置之后重新设置光标的位置,好了，思路就是这样的，话不多说，直接上代码
//Anhighlightedblock
//javascript
onInput(){
val=this.value.replace(/\D/g,'').substring(0,11);
constnowIndex=this.getCursortPosition(this.$refs.inputRef);
if(valueLen>3&&valueLen<8){
this.value=`${val.substr(0,3)}${val.substr(3)}`;
}elseif(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){
letCaretPos=0;
if(document.selection){
//支持IE
element.focus();
constSel=document.selection.createRange();
Sel.moveStart('character',-element.value.length);
CaretPos=Sel.text.length;
}elseif(element.selectionStart||element.selectionStart==='0'){
//支持firefox
CaretPos=element.selectionStart;
}
returnCaretPos
},
setCurIndex(nowIndex,value){
constlen=value.length;
setTimeout(()=>{
letpos=nowIndex;
//新增操作
if(len>this.oldLen){
if(nowIndex===4||nowIndex===9){
pos+=1;
}
}elseif(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格式内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！