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

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

赞 (0)

相关推荐

  • javascript 手机号码正则表达式验证函数 原创

    复制代码 代码如下: function checkMobile(){     var sMobile = document.mobileform.mobile.value     if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){         alert("不是完整的11位手机号或者正确的手机号前七位");         document.mobileform.mobile.focus();         return false;

  • 实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)

    //校验是否全由数字组成 复制代码 代码如下: function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } //校验登录名:只能输入5-20个以字母开头.可带数字."_"."."的字串 复制代码 代码如下: function isRegisterUserName(s) { var patrn=/^[a-zA-Z]{1}([a-zA-Z0

  • 2019手机号码JS正则表达式验证实例代码

    概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串

  • js 手机号码合法性验证代码集合

    第一个代码: 复制代码 代码如下: function Checkreg() { //验证电话号码手机号码,包含153,159号段 if (document.form.phone.value=="" && document.form.UserMobile.value==""){ alert("电话号码和手机号码至少选填一个阿!"); document.form.phone.focus(); return false; } if (d

  • js验证输入是否为手机号码或电话号码示例

    代码如下: 复制代码 代码如下: <script type="text/javascript"> String.prototype.Trim = function() { var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/); return (m == null) ? "" : m[1]; } String.prototype.isMobile = function() { return (/^(?:13\d|15[8

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

    JavaScript实现手机号码 3-4-4格式 手机号实现3-4-4格式相对来说还是比较简单的,监听input事件,实时的获取手机号码,然后根据手机号码的长度做截取和拼接的操作,即可实现手机格式的处理,实现格式的处理之后,我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面,因为手机号的格式使我们重置的,监听input事件重新赋值之后光标会移动到最后一位,解决这个问题的办法就是记录光标的位置并在value值格式重置之后重新设置光标的位置,好了,思路就是这样的,话不多说,直接上代码

  • javascript将url解析为json格式的两种方法

    javascript将url解析为json格式的两种方法

    本文介绍了javascript将url解析为json格式的两种方法,分享给大家,具体如下: 方法一:最简单的方法,利用a标签来实现 function parseUrl(url){ var a=document.createElement('a'); a.href=url; return { protocol:a.protocol.replace(':',''), hostname:a.hostname, port:a.port, path:a.pathname, query:(()=>{ var

  • JavaScript将数组转换成CSV格式的方法

    本文实例讲述了JavaScript将数组转换成CSV格式的方法.分享给大家供大家参考.具体分析如下: JavaScript中数组对象的valueOf方法可以将数组的值输出为逗号分割的字符串,下面的代码演示了如何将数组抓换成逗号和竖线分割的字符串 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); //输出结果: apple,peaches,oranges,mangoes 如果希望

  • JavaScript 下载svg图片为png格式

    1.遇到需要将svg下载的需求,网上找了一些代码,地址是这个https://github.com/exupero/saveSvgAsPng,但是不太好用,莫名的把网页所有的svg都下载了,于是在源码的基础上做了一些小的修改:代码如下所示 var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

  • json格式数据的添加，删除及排序方法

    本文实例讲述了json格式数据的添加,删除及排序方法.分享给大家供大家参考,具体如下: js数据格式和json数据格式,各有各的用处,就个人而言,json更好用一点,js自身的数组和对像限制比较多. 以js的数组举例: var a = ['1']; a[5] = 52; a.length //这儿的结果是6,也就是说,中间的key会自动补全,而值呢,是undefined 一.添加和删除 1.一维数组 test = {}; //空json对像 test['firstname'] = "tank&q

  • JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    本文实例讲述了JavaScript数组,JSON对象实现动态添加.修改.删除功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>javascript里面的数组,json对象,动态添加,修改,删除示例</t

  • javascript中处理时间戳为日期格式的方法

    公共处理时间戳函数 复制代码 代码如下: /** * 处理时间戳转换成日期格式 * @param {Object} obj 时间戳{10位的时间戳需要乘以1000:13位的时间戳不需要} * @return {TypeName} 返回日期格式 2013-09-16 */ function fullnum(obj){ if(Number(obj) < 10){ return '0' + obj; }else{ return obj; } } 1.在PHP中存入的时间戳是10位的,而在javascr

  • Javascript将数字转化成为货币格式字符串

    这里第一个方法是用JavaScript将数字number转换为货币字符串的格式(参数:保留小数位数,货币符号,整数部分千位分隔符,小数分隔符) 这里第二个方法是用简单的正则表达式将货币字符换转换为纯净的数字字符串,之后便可以将字符串转换为数字number JavaScript Money Format(用prototype对Number进行扩展) // Extend the default Number object with a formatMoney() method: // usage:

  • javascript自定义函数参数传递为字符串格式

    自定义函数参数传递为 字符串格式 ,传递方式 1:用this传递 2:引号缺省 3:转义字符(html中 " 代表"双引号,&apos;代表单引号,javascript中直接\" 和Java通用转义字符集) <html> <head> <script language="LiveScript"> function print(arg){ alert("你好!"+arg); } </scr

  • 使用javascript实现json数据以csv格式下载

    使用javascript实现json数据以csv格式下载

    摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: 复制代码 代码如下: <!DOCTYPE html> <html>     <title>download csv</title>     <head>         <script src="http://code.jquery.com/jqu

随机推荐