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


Posted in Javascript onNovember 22, 2016

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

注意:这个使用了jquery框架

核心代码

$(function() {

      $('#kahao').on('keyup', function(e) {
       //只对输入数字时进行处理
        if((e.which >= 48 && e.which <= 57) ||
            (e.which >= 96 && e.which <= 105 )){
          //获取当前光标的位置
          var caret = this.selectionStart
          //获取当前的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
        
        }
      })
    })

完整代码:已经测试

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>银行卡号4位空格</title>
  <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>

<body>
  <input type="text" id="kahao" />
  <script>
    $(function() {

      $('#kahao').on('keyup', function(e) {
       //只对输入数字时进行处理
        if((e.which >= 48 && e.which <= 57) ||
            (e.which >= 96 && e.which <= 105 )){
          //获取当前光标的位置
          var caret = this.selectionStart
          //获取当前的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
        
        }
      })
    })
  </script>
</body>

</html>

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

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

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

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
详解Js模板引擎(TrimPath)
Nov 22 #Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 #Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
python Django模板的使用方法
2016/01/14 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python导入时小括号大作用
2017/01/10 Python
使用python实现接口的方法
2017/07/07 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
关于青春的演讲稿
2014/05/05 职场文书
英语教研活动总结
2014/07/02 职场文书
119消防日活动总结
2014/08/29 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
参加招聘会后的感想
2015/08/10 职场文书