基于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 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Bootstrap插件全集
Jul 18 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
Zend Guard一些常见问题解答
2008/09/11 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
vue3.0 上手体验
2020/09/21 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
初学python数组的处理代码
2011/01/04 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python实现网站的模拟登录
2016/01/04 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
使用python接入微信聊天机器人
2020/03/31 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
任意存:BOXFUL
2018/05/21 全球购物
几个常见的软件测试问题
2016/09/07 面试题
教师网络培训感言
2014/03/09 职场文书
公立医院改革实施方案
2014/03/14 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android