基于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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
javascript屏蔽右键代码
May 15 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
js实现拖拽效果
2015/02/12 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Angular 路由route实例代码
2016/07/12 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
5个很好的Python面试题问题答案及分析
2018/01/19 Python
linux 下selenium chrome使用详解
2020/04/02 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
管理站站长岗位职责
2013/11/27 职场文书
大学生实习证明范本
2014/01/15 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏