解决replace格式替换后光标定位问题
场景:格式化银行卡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):
/*-----------------*/
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格式替换后光标定位问题的更多相关文章
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- MySQL replace函数替换字符串语句的用法(mysql字符串替换)
MySQL replace函数我们经常用到,下面就为您详细介绍MySQL replace函数的用法,希望对您学习MySQL replace函数方面能有所启迪. 最近在研究CMS,在数据转换的时候需要用 ...
- Google Chrome input 设置 line-height 后光标变得和input一样高
Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果 ...
- SQL某个字段在原内容上增加固定内容或replace查找替换内容
今天正好遇到一个SQL小问题,特做备注 在原有的表中数据如pic 在不动原内容的基础上增加../路径,但不能修改原数据值 原数据 SQL: pic字段 需要增加'../'的内容 update Bmps ...
- 微信小程序-输入框输入文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后
问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...
- uwp - RichEditBox 解决设置字体样式后滚动条自动回滚顶部的问题
原文:uwp - RichEditBox 解决设置字体样式后滚动条自动回滚顶部的问题 开发中碰到一个问题,当RichEditBox输入的文本达到一定行数的时候,滚动条此时位于底部,改变文本样式(如字体 ...
- sed 's/AA/BB/' file # 将文件中的AA替换成BB,只替换一行中第一次出现的AA,替换后的结果输出到屏幕 sed 's/AA/BB/g' file # 将文件中的所有AA都替换成BB,替换后的结果输出到屏幕
生信人的自我修养:Linux命令速查手册 简佐义 四川大学 生物信息学硕士 科学求真 赢 10 万奖金 · 院士面对面 209 人赞同了该文章 许多人做生物信息学,要么不重视Linux,要么不知道 ...
- 彻底解决phpcms v9升级后,文章发布出现: Mysql 1267错误:MySQL Error : Illegal mix of collations 解决办法
彻底解决phpcms v9升级后,文章发布出现: MySQL Query : SELECT * FROM `withli_a`.`v9_keyword` WHERE `keyword` = '吼吼' ...
- ASP.NET Core中使用IOC三部曲(三.采用替换后的Autofac来实现AOP拦截)
前言 本文主要是详解一下在ASP.NET Core中,采用替换后的Autofac来实现AOP拦截 觉得有帮助的朋友~可以左上角点个关注,右下角点个推荐 这里就不详细的赘述IOC是什么 以及DI是什么了 ...
随机推荐
- BZOJ2822:[AHOI2012]树屋阶梯(卡特兰数,高精度)
Description 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为 ...
- vue中调用地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 ...
- 【AngularJS学习笔记】Java Script "use strict" 严格模式
---恢复内容开始--- 学习Angular的时候,发现好多优秀的源码中,JS文件的最上面,都会写上"use strict"; 这几个字符,搜了一下,找到一篇比较不错的文章,抄过来 ...
- 浅谈React、Vue 部分异步
React中的setState setState为什么需要异步? 无法限制何时使用异步,多次连续使用setState 防止多次渲染,异步rendering不仅仅是性能上的优化,而且这可能是react组 ...
- ABAP术语-BAPI ExplorerSupertype
Supertype 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/17/1109837.html Object type from whic ...
- .Net core 使用Swagger
接触到项目的时候,用了很久的Swagger,发现Swagger真的非常好用,不但方便了调试Web Api,还生成了Api 文档,真是非常的好用啊. 然后我想搞懂到底如何使用Swagger,所以自己建了 ...
- dmesg功能介绍
dmesg 命令的使用范例 ‘dmesg’命令设备故障的诊断是非常重要的.在‘dmesg’命令的帮助下进行硬件的连接或断开连接操作时,我们可以看到硬件的检测或者断开连接的信息.‘dmesg’命令在多数 ...
- shell编程基础-01
1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具Linux/UNIX系统的底层及基础应用软件的核心大都涉及Shell脚本的 ...
- 新人成长之入门Vue.js弹窗Dialog介绍(二)
前言 在上一篇博文中介绍了Vue.js的常用指令,今天总结归纳一下弹窗Dialog的使用,弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,在保留当前页面状态的情况下,告知用户并承载相关 ...
- css 浮动说明
clear:both; 1.要了解的:什么是浮动.浮在某面板之上. 例如:float:left; 向左停靠, 就是让需要设置浮动的元素,跟在指定元素后面. 先上实例: 比较常用导航: .nav_ul ...