基于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 (用setTimeout而非setInterval)
Dec 28 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JavaScript模拟push
Mar 06 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 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
建立动态的WML站点(三)
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python爬取成语接龙类网站
2018/10/19 Python
python实现二维插值的三维显示
2018/12/17 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
中专毕业生自荐信
2013/11/16 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
运动会致辞稿50字
2014/02/04 职场文书
安全生产月活动总结
2014/05/04 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
高中教师个人总结
2015/02/10 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python