基于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 相关文章推荐
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
如何快速上手Vuex
Feb 14 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 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
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
django model通过字典更新数据实例
2020/04/01 Python
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
天网面试题
2013/04/07 面试题
《藤野先生》教学反思
2014/02/19 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
社区班子对照检查材料
2014/08/27 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
学生检讨书如何写
2014/10/30 职场文书
海底两万里读书笔记
2015/06/26 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
golang 实现对Map进行键值自定义排序
2021/04/28 Golang