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 10件让人费解的事情
Feb 15 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
原生js实现密码强度验证功能
Mar 18 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
关于Python作用域自学总结
2019/06/10 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python yield的用法实例分析
2020/03/06 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
自荐信包含哪些内容
2013/10/30 职场文书
医务人员自我评价
2014/01/26 职场文书
敬老模范事迹
2014/05/21 职场文书
法律系毕业生求职信
2014/05/28 职场文书
会计求职信
2014/05/29 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
初中班主任心得体会
2016/01/07 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python