场景:格式化银行卡444格式 手机号344格式 身份证号684格式 校验数据格式,replace后光标定位错乱 或光标一直定位在最后

解决,只针对input,代码用的vue:

获取光标位置:

getCursorPos(obj) {
var CaretPos = 0; // IE Support
if (document.selection) {
obj.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -obj.value.length);
CaretPos = Sel.text.length;
} else if (obj.selectionStart || obj.selectionStart == '0') // Firefox/Safari/Chrome/Opera support
CaretPos = obj.selectionEnd;
return CaretPos;
},

设置光标位置:

setCursorPos(obj, pos) {
if (obj.setSelectionRange) {//Firefox/Safari/Chrome/Opera
obj.focus();
obj.setSelectionRange(pos, pos);
} else if (obj.createTextRange) { // IE
var range = obj.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}

使用(obj当前input):

/*-----------------*/
      let obj = $event.target;
        var pos = this.getCursorPos(obj); //保存原始光标位置
var temp = obj.value; //保存原始值
obj.value = obj.value.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');
this.defaultVal = obj.value;
pos = pos - (temp.length - obj.value.length); //当前光标位置
this.setCursorPos(obj, pos); //设置光标
/*-----------------*/

解决replace格式替换后光标定位问题的更多相关文章

  1. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  2. MySQL replace函数替换字符串语句的用法(mysql字符串替换)

    MySQL replace函数我们经常用到,下面就为您详细介绍MySQL replace函数的用法,希望对您学习MySQL replace函数方面能有所启迪. 最近在研究CMS,在数据转换的时候需要用 ...

  3. Google Chrome input 设置 line-height 后光标变得和input一样高

    Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果 ...

  4. SQL某个字段在原内容上增加固定内容或replace查找替换内容

    今天正好遇到一个SQL小问题,特做备注 在原有的表中数据如pic 在不动原内容的基础上增加../路径,但不能修改原数据值 原数据 SQL: pic字段 需要增加'../'的内容 update Bmps ...

  5. 微信小程序-输入框输入文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后

    问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...

  6. uwp - RichEditBox 解决设置字体样式后滚动条自动回滚顶部的问题

    原文:uwp - RichEditBox 解决设置字体样式后滚动条自动回滚顶部的问题 开发中碰到一个问题,当RichEditBox输入的文本达到一定行数的时候,滚动条此时位于底部,改变文本样式(如字体 ...

  7. sed &#39;s/AA/BB/&#39; file # 将文件中的AA替换成BB,只替换一行中第一次出现的AA,替换后的结果输出到屏幕 sed &#39;s/AA/BB/g&#39; file # 将文件中的所有AA都替换成BB,替换后的结果输出到屏幕

    生信人的自我修养:Linux命令速查手册 简佐义 ​ 四川大学 生物信息学硕士 科学求真 赢 10 万奖金 · 院士面对面 209 人赞同了该文章 许多人做生物信息学,要么不重视Linux,要么不知道 ...

  8. 彻底解决phpcms v9升级后,文章发布出现: Mysql 1267错误:MySQL Error : Illegal mix of collations 解决办法

    彻底解决phpcms v9升级后,文章发布出现: MySQL Query : SELECT * FROM `withli_a`.`v9_keyword` WHERE `keyword` = '吼吼' ...

  9. ASP.NET Core中使用IOC三部曲(三.采用替换后的Autofac来实现AOP拦截)

    前言 本文主要是详解一下在ASP.NET Core中,采用替换后的Autofac来实现AOP拦截 觉得有帮助的朋友~可以左上角点个关注,右下角点个推荐 这里就不详细的赘述IOC是什么 以及DI是什么了 ...

随机推荐

  1. MMORPG大型游戏设计与开发(服务器 AI 控制器)

    上一篇我们说了基础接口的组成,想必大家对AI中的基础方法有了一定的了解,而基础接口只能一个通用的,要实现不同的类别还需子类中实现,这就形成了玩家.主动.被动.木桩这些类型.不同类型的AI需要有一个统一 ...

  2. Dell_R710 centos5.4 网卡(BCM5709)中断故障解决

    环境:Dell R710   Centos 5.4 i386 现象:正常运行中无故断网,没有规律 原因:RedHat As5.X 版本中的Broadcom NetXtreme II BCM 5709 ...

  3. windows2003批量添加和导出所有ip

    批量添加IP 在cmd命令行下运行: FOR /L %i IN (130,1,190) DO netsh interface ip add address "本地连接" 192.1 ...

  4. LDO稳压器工作原理

    LDO稳压器工作原理 随着便携式设备(电池供电)在过去十年间的快速增长,像原来的业界标准 LM340 和LM317 这样的稳压器件已经无法满足新的需要.这些稳压器使用NPN 达林顿管,在本文中称其为N ...

  5. volatile和synchronized的区别

    volatile和synchronized特点 首先需要理解线程安全的两个方面:执行控制和内存可见. 执行控制的目的是控制代码执行(顺序)及是否可以并发执行. 内存可见控制的是线程执行结果在内存中对其 ...

  6. 三篇文章带你极速入门php(三)之php原生实现登陆注册

    看下成果 ps:纯天然h5,绝不添加任何添加剂(css)以及化学成分(js)(<( ̄ ﹌  ̄)我就是喜欢纯天然,不接受任何反驳) 关于本文 用原生的php和html做了一个登陆注册,大概是可以窥 ...

  7. EntityFramework Core

    1,安装EF Core 在.csproj中添加一下配置,用于使用dotnet ef 命令 <ItemGroup> <DotNetCliToolReference Include=&q ...

  8. HDFS分布式文件系统(The Hadoop Distributed File System)

    The Hadoop Distributed File System (HDFS) is designed to store very large data sets reliably, and to ...

  9. OC线程操作-GCD介绍

    1. GCD介绍 1.11.2 1.3 异步具备开启能力但是不是 一定可以开启 1.4 1.5 67. 8.

  10. Portal的安全代理(反向代理出口)配置架构

    对于正式运行的环境,一般需要设置网络安全控制区DMZ,通过代理,把仅需要的端口向客户端暴露,其他内部端口应该是在防火墙包含之内的. 下文将针对ArcGIS 的Portal软件,讲述在DMZ中如何架构的 ...