基于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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
动态表格Table类的实现
Aug 26 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PHP实现倒计时功能
2020/11/16 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
vue.js表格分页示例
2016/10/18 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python实现数独算法实例
2015/06/09 Python
Python模块搜索路径代码详解
2018/01/29 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
如何用Lucene索引数据库
2016/02/23 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
给老师的道歉信
2014/01/11 职场文书
生日邀请函范文
2014/01/13 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
地道战观后感2000字
2015/06/04 职场文书
创业计划书之冷饮店
2019/09/27 职场文书