JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置


Posted in Javascript onJune 02, 2020

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格式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 #Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 #Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 #Javascript
实例分析javascript中的异步
Jun 02 #Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 #Javascript
js简单实现自动生成表格功能示例
Jun 02 #Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
You might like
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
React简单介绍
2017/05/24 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python生成器用法实例详解
2019/11/22 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书