首页 >> js开发 >> js代码JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
js代码JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
JavaScript实现手机号码 3-4-4格式JavaScript实现手机号码 3-4-4格式手机号实现3-4-4格式相对来说还是比较简单的,监听input事件,实时的获取手机号码,然后根据手机号码的长度做截取和拼接的操作,即可实现手机格式的处理,实现格式的处理之后,我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面,因为手机号的格式使我们重置的,监听input事件重新赋值之后光标会移动到最后一位,解决这个问题的办法就是记录光标的位置并在value值格式重置之后重新设置光标的位置,好了,思路就是这样的,话不多说,直接上代码
// An highlighted block
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);
},
// An highlighted block
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);
},总结总结总结
// An highlighted block
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);
},
// An highlighted block
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);
},总结总结总结
相关文章:
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js使用eslint和githooks统一前端风格的技巧js大全
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- js代码处理JavaScript值为undefined的7个小技巧
- jsVue组件跨层级获取组件操作js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全