基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

前端之家收集整理的这篇文章主要介绍了基于jquery实现的银行卡号每隔4位自动插入空格的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

难点不是插入空格,而是修正光标的位置,这个只支持IE9+、chrome浏览器

注意:这个使用了jquery框架

核心代码

$('#kahao').on('keyup',function(e) { //只对输入数字时进行处理 if((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105 )){ //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前光标的位置 var caret = this.selectionStart //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前的value var value = this.value //从左边沿到坐标之间的空格数 var sp = (value.slice(0,caret).match(/\s/g) || []).length //去掉所有空格 var nospace = value.replace(/\s/g,'') //重新插入空格 var curVal = this.value = nospace.replace(/(\d{4})/g,"$1 ").trim() //从左边沿到原坐标之间的空格数 var curSp = (curVal.slice(0,caret).match(/\s/g) || []).length //修正光标位置 this.selectionEnd = this.selectionStart = caret + curSp - sp } }) })</pre>

完整代码:已经测试

<head lang="en">
<Meta charset="UTF-8">

银行卡号4位空格

经过测试确实很好用,里面用到了很多的正则

\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

关于正则表达式的教程可以参考这篇文章

原文链接:https://www.f2er.com/jquery/44280.html

猜你在找的jQuery相关文章