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); },
总结
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月13日
2024年11月13日
- 魔兽世界蓝贴:史诗安苏雷克女王调整
- 群星《涂鸦低音炮1》黑胶精选 [WAV+CUE][1G]
- 容祖儿《小小》香港首版 [WAV+CUE][1.1G]
- 费玉清《天之大》SONY台湾版 [WAV+CUE][1G]
- 英雄联盟双城之战第二季主题曲谁唱的 双城之战2主题曲演唱歌手介绍
- 逆水寒2024双11活动有什么 2024双11特惠活动开始时间
- 宝可梦大集结国服和国际服有什么区别 大集结国服vs国际服
- YelenaEckemoff-RomanceoftheMoon(2024)[24-WAV]
- 群星《发烧醉乐坊太湖美(民乐典范)》[WAV+CUE]
- 中国发烧名盘《中国管弦-九州之韵》DTS[WAV]
- V社官宣推出白色限量版Steam Deck!11月18日上市
- 梦回2016!《守望先锋2》限时推出6v6怀旧模式
- 吴京谈《镖人》拍摄过程:演员们打得很爽 文戏也过瘾
- 林家谦.2024-ISFP【FLAC分轨】
- 群星.1996-摇滚柔情【正大国际】【WAV+CUE】