javaScript实现input框输入银行卡号，并且只能输入数字且每四位添加一个空格最近在做一个项目，其中在支付页面需

最近在做一个项目，其中在支付页面需要填写银行卡号，过程在这里做下总结：

首先、过程就不细说了，但最后是参考司徒老师的，代码链接：www.cnblogs.com/rubylouvre/…

经实践发现这版可以输入字母及其它符号之类，固有一点不满足我这需求所提要求（仅仅能输入数字），然后我就在此基础改进一番，demo如下：

<!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 >= 0 && e.which <= 32 )){// 数字 和 删除 左右移动光标 回车 翻页 等可以
                    //获取当前光标的位置
                    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
                }else{//不是数字和【删除】【左右移动光标】【回车】【翻页】等
                    var $this = $(this);
                    val = $this.val();
                    $this.val(val.replace(/[^\d]/g, '').replace(/(\d{4})/g, "$1 "))
                }
            })
        })
    </script>
</body>
</html>

亲测可以，仅作为个人总结，如有不对，望指正！