JavaScript实现手机号码 3-4-4格式并控制新增和删除
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了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格式并控制新增和删除时光标的位置的文章就介绍到这了,更多相关js 手机号码3-4-4格式内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！