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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
js+css实现打字效果
Jun 24 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php操作mongoDB实例分析
2014/12/29 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
获取body标签的两种方法
2011/10/13 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
js动态引入的四种方法
2018/05/05 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python读取和保存视频文件
2018/04/16 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
室内设计专业毕业生求职信
2014/05/02 职场文书
建设投标担保书
2014/05/13 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
党性分析自查总结
2014/10/14 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL