js控制四个数字加空格(银行卡)并且支持插入数字(解决光标跳动问题)
2016-10-17 00:00
267 查看
一般来说,为了便于用户输入,银行卡号会每四个数字用空格隔开,这个在前端使用正则表达式不难做到,但是容易出现不能从数字中间插入的问题:光标移动到中间,输入一个数字后光标便自动跳转到最右了。
上述问题非常影响用户体验,经过一段时间的研究,我用以下办法解决了此问题:
##Input
这里使用了type="tel",这样是为了在移动端调出数字键盘,H5的新特性pattern也可以实现,但是这个属性的兼容性并不是很好。
##监控输入
js针对input有个属性selectionStart,这个是当前光标所在的位置,那么我们只要获取了这个位置,哪怕之后它跳到了最右,我们也可以控制它回到原来的位置。
上述问题非常影响用户体验,经过一段时间的研究,我用以下办法解决了此问题:
##Input
这里使用了type="tel",这样是为了在移动端调出数字键盘,H5的新特性pattern也可以实现,但是这个属性的兼容性并不是很好。
<input type="tel" placeholder="请输入储蓄卡卡号" name="cardNum">
##监控输入
js针对input有个属性selectionStart,这个是当前光标所在的位置,那么我们只要获取了这个位置,哪怕之后它跳到了最右,我们也可以控制它回到原来的位置。
//监控input事件 document.querySelector('input[name=cardNum]').addEventListener('input', function() { //获取当前光标位置 var position = this.selectionStart; var v = this.value; //四个字符加一个空格 this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 "); //优化语句:如果当前位置是空格字符,则自动清除掉 if (this.value.charAt(this.value.length - 1) == ' ') { this.value = this.value.substring(0, this.value.length - 1); } var input = this; //重新定位光标位置,start和end都需要设置,不然就是截取片段了 input.selectionStart = position + countSpace(this.value, position); input.selectionEnd = position + countSpace(this.value, position); })
相关文章推荐
- js控制四个数字加空格(银行卡)并且支持插入数字(解决光标跳动问题)
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- SQL Server Reporting Services 用户不具有所需的权限。请验证授予了足够的权限并且解决了 Windows 用户帐户控制(UAC)限制问题。
- 用js解决数字不能换行问题
- Oracle中将数字转换成字符插入表中会多一个空格的解决方法
- CSS解决无空格的字母、数字过长不自动换行的问题
- 关于 IE firefox Chrome下的通过用js 关闭窗口部分不支持问题解决
- tinymce编辑器的光标位置插入内容时,光标丢失问题解决办法
- 用户“XXX\XXX”不具有所需的权限。请验证授予了足够的权限并且解决了 Windows 用户帐户控制(UAC)限制问题。
- 利用JS解决ie6不支持max-width,max-height问题的方法
- 【原】使用iScroll.js解决ios4下不支持position:fixed的问题
- CSS解决无空格太长的字母,数字不会自动换行的问题
- 源码:Richtextbox和Hyperlink的光标控制问题的解决。
- 解决Boost.Regex对中文支持不好的问题(据此解决全角数字换为半角数字)
- 小问题一枚,键鼠支持多媒体控制的骚年,无法控制音乐、音量等的解决方法
- 解决QProcess对象调用execute执行cmd命令不支持中文和空格的问题
- [C] 跨平台使用TCHAR——让Linux等平台也支持tchar.h,解决跨平台时的格式控制字符问题,多国语言的同时显示(兼容vc/gcc/bcb,支持Windows/Linux/Mac)
- [C] 跨平台使用TCHAR——让Linux等平台也支持tchar.h,解决跨平台时的格式控制字符问题,多国语言的同时显示(兼容vc/gcc/bcb,支持Windows/Linux/Mac)
- CSS解决无空格太长的字母,数字不会自动换行的问题
- JS代码获取当前日期时支持IE,不兼容FF和chrome,解决这个问题,我们需要把获取时间的getYear()函数换成getFullYear()