这篇文章主要讲解了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格式并控制新增和删除时光标的位置有进一步的了解，如果还想学习更多内容，欢迎关注天达云行业资讯频道。