基于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 保存文件到本地实现方法
Nov 29 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
关于Javascript闭包与应用的详解
Apr 22 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+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
js中位运算的运用实例分析
2018/12/11 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python使用wxPython实现计算器
2018/01/30 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
大学自荐信
2013/12/12 职场文书
同学聚会主持词
2014/03/18 职场文书
关于环保的建议书
2014/05/12 职场文书
合伙购房协议样本
2014/10/06 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
教师个人教学反思
2016/02/23 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python