链接

输入4为数字, 再输入一个数字调试一下就能看懂了

<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()   //主要这里"$1 " 加了一个空格

                   //从左边沿到原坐标之间的空格数, 重新赋值后有几个空格

                   var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length

                  //修正光标位置

                 this.selectionEnd = this.selectionStart = caret + curSp - sp

                }

            })

        })

    </script>

</body>

</html>

　　

支付宝为了兼容 和 易用性, 是在悬浮一个提示框分开卡号的, 这种也比较容易实现

如图 

银行卡号每隔4位插入空格 (再用户填写银行卡号的时候挺有用的) IE9+的更多相关文章

  1. C#银行卡号每隔4位数字加一个空格

    1.填写银行卡号每隔4位数字加一个空格 Regex.Replace(dic["BankCardNo"].ToString(), @"(\d{4}(?!$))", ...

  2. vue项目中的字符串每隔4位一个空格

    项目中遇到现实银行卡号的需求所以需要这个方法 我们这里运用 JavaScript replace()方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子 ...

  3. jQuery实现18位身份证输入隔位添加空格及格式验证

    说明:jQuery实现身份证输入添加空格,表单验证身份证输入,并且输入时前6位添加一个空格,中间8位后添加一个空格,及身份证格式验证 参考:基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 ...

  4. javascript在一个字符串中每隔多少字符插入某个字符串

    function insertStr(str,tar,n,m){ var x='' var str=str.split('') if(str.length==0) return for(var i=n ...

  5. 如何在Markdown文档中插入空格?

    简单说 在 Markdown 文档中,可以直接采用 HTML 标记插入空格(blank space),而且无需任何其他前缀或分隔符.具体如下所示: 插入一个空格 (non-breaking space ...

  6. 在HTML代码中要如何插入空格？

    超文本标记语言(HTML)会自动忽略空格.平常在编写代码的时候,用空格键.Tab键以及回车键产生的空格,都会被HTML自动忽略.那么我们该用什么方法来实现HTML的空格效果呢?有专门的空格代码吗?不少 ...

  7. MathType插入空格

    公式太长,换行后加一些空格,继续录. 将鼠标定位到需要插入空格的位置,此时如果直接按空格键,你会发现并不能插入空格.正确的输入方法有两种: 方法一,在菜单栏中[样式]菜单下选择[文本],随后按空格键即 ...

  8. 某input元素值每隔三位添加逗号跟去掉逗号

    //每隔三位数字加一个逗号function moneyformat(s) {    var reg = /.*\..*/;    if (reg.test(s) == true) {        n ...

  9. js正则实现用户输入银行卡号的控制及格式化

    //js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"& ...

随机推荐

  1. spring登录验证拦截器和根据用户角色登录

    大家都知道spring的用户登录拦截器,确实省去了程序员不少的精力,下面说说我在项目中使用的感受. 德安微信管理后台是管理多个微信帐号的平台,登录到平台的用户有三个角色,游客和微信帐号管理员.超级管理 ...

  2. SVM引入拉格朗日乘子[转载]

    转自:https://zhidao.baidu.com/question/494249074914968332.html SVM使用拉格朗日乘子法更为高效地求解了优化问题. SVM将寻找具有最大几何间 ...

  3. 剑指offer-有序二维数组中的查找

    在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. def Find(self, t ...

  4. Android初体验之Monkey和MonkeyRunner

    原文地址https://blog.csdn.net/mad1989/article/details/38087737 Monkey 什么是Monkey Monkey是Android中的一个命令行工具, ...

  5. Spring—Ioc

    IoC容器,最主要的就是完成对象的创建以及维护对象的依赖关系等. 所谓控制反转,包括两部分:一是控制,二是反转,就是把传统方式需要由代码来实现对象的创建.维护对象的依赖关系,反转给容器来帮忙管理和实现 ...

  6. F题:等差区间(RMQ||线段树)

    原题大意:原题链接  题解链接 给定一个长为n的数组元素和q次区间[l,r]询问,判断区间[l,r]内元素排序后能否构成等差数列 #include<cmath> #include<c ...

  7. supervisor安装及其配置

    一.supervisor概述 supervisor是一个c/s系统,被用来在类Unix系统中监控进程状态.supervisor使用python开发. 服务端进程为supervisord,主要负责启动自 ...

  8. EditPlus 4.3.2473 中文版已经发布（10月21日更新）

    新的 EditPlus 修复了如下问题: * Ctrl+鼠标拖放文本功能异常 * 上传文件到 FTP 服务器失败后将弹出对话框,可重试上传 * 列选模式下粘贴到现存的选中内容时文本错乱的问题 本博客已 ...

  9. Python: 大型数组运算

    需要在大数据集(比如数组或网格) 上面执行计算,涉及到数组的重量级运算操作,可以使用NumPy 库. 下面是一个简单的小例子,展示标准列表对象和NumPy 数组对象之间的差别 >>> ...

  10. smarty简单语法

    什么是smarty及其安装 Smarty是一个php模板引擎,它分开了逻辑程序和外在的内容,提供了一种易于管理的方法. Smarty要求web服务器运行php4.0.6和以上版本. smarty安装需 ...