JS实现input中输入数字，控制每四位加一个空格（银行卡号格式）

前言

今天来讲讲js中实现input中输入数字，控制每四位加一个空格的方法！这个主要是应用于我们在填写表单的时候，填写银行卡信息，要求我们输入的数字是四位一个空格！今天主要介绍两种方式来实现这个方法！但是都运用到了键盘码。下面我就列举一下键盘码，以备后面查阅！

键盘各按键对应的数字

keycode 8 = BackSpace      |     keycode 9 = Tab              |   keycode 12 = Clear
keycode 13 = Enter            |      keycode 16 = Shift           |   keycode 17 = Control
keycode 18 = Alt               |      keycode 19 = Pause         |  keycode 20 = CapsLock
keycode 27 = Escape        |      keycode 32 = Space         |   keycode 33 = Prior

keycode 34 = Next            |      keycode 35 = End            |  keycode 36 = Home
keycode 37 = Left             |       keycode 38 = Up             |   keycode 39 = Right
keycode 40 = Down          |       keycode 41 = Select         |  keycode 42 = Print
keycode 43 = Execute      |       keycode 45 = Insert         |   keycode 46 = Delete
keycode 47 = Help           |       keycode 48 = 0                |   keycode 49 = 1
keycode 50 = 2                |       keycode 51 = 3                |    keycode 52 = 4
keycode 53 = 5                |       keycode 54 = 6                |    keycode 55 = 7
keycode 56 = 8                |       keycode 57 = 9                |    keycode 65 = A
keycode 66 = B                |        keycode 67 = C              |    keycode 68 = D
keycode 69 = E                |        keycode 70 = F               |     keycode 71 = G
keycode 72 = H               |        keycode 73 = I                |    keycode 74 = J
keycode 75 = K               |         keycode 76 = L               |    keycode 77 = M
keycode 96 = KP_0          |        keycode 97 = KP_1         |    keycode 98 = KP_2
keycode 99 = KP_3          |        keycode 100 = KP_4       |    keycode 101 = KP_5
keycode 102 = KP_6        |         keycode 103 = KP_7      |    keycode 104 = KP_8
keycode 105 = KP_9        |         keycode 78 = N             |    keycode 79 = O
keycode 80 = P                |         keycode 81 = Q             |   keycode 82 = R
keycode 83 = S                |         keycode 84 = T              |    keycode 85 = U
keycode 86 = V                |         keycode 87 = W            |    keycode 88 = X
keycode 89 = Y               |          keycode 90 = Z              |   keycode 112 = F1
keycode 113 = F2           |          keycode 114 = F3           |   keycode 115 = F4
keycode 116 = F5          |           keycode 117 = F6           |   keycode 118 = F7
keycode 119 = F8          |           keycode 120 = F9           |   keycode 121 = F10
keycode 122 = F11

96到105是小键盘数字键！48到57是大键盘的数字键！

注意：上面的键盘代码是keydown或者keyup按下的代码！是按键的映射代码。

keypress键盘按下去有些是不一样的！因为keypress是输入字符的Unicode。

感兴趣的可以去测试一下：

<input type="text" size="50" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">
<p>onkeypress - <span id="demo"></span></p>
<p>onkeydown - <span id="demo2"></span></p>
<script>
function uniCharCode(event) {
    var char = event.which || event.keyCode;
    document.getElementById("demo").innerHTML = " Unicode 字符代码为: " + char;
}
function uniKeyCode(event) {
    var key = event.keyCode;
    document.getElementById("demo2").innerHTML = " Unicode 键代码为: " + key;
}
</script>

实现方法一

<input type="text" id="haorooms"/>
<script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script>

    !function () {
        $('#haorooms').on('keyup mouseout input',function(e){
       if((e.which >= 48 && e.which <= 57) ||(e.which >= 96 && e.which <= 105 )){
            var $this = $(this),
                v = $this.val();
            /\S{5}/.test(v) && $this.val(v.replace(/\s/g,'').replace(/(.{4})/g, "$1 "));
         }
        });
    }();

上面的方式我们可以用js来实现，代码如下：

!function () {
    document.getElementById('haorooms').onkeyup = function (event) {
      if((event.which >= 48 && event.which <= 57) ||(event.which >= 96 && event.which <= 105 )){
        var v = this.value;
        if(/\S{5}/.test(v)){
            this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
        }
      };
   }
}();

方法一解释

上面主要是运用了一些正则表达式，关于正则表达式，记得不是很牢的同学可以查看：http://www.haorooms.com/post/js_regex_refuse

上面的自调用匿名函数我之前文章中也提及过！http://www.haorooms.com/post/js_jquery_chajian 及http://www.haorooms.com/post/qianduan_xnyhbc 等等很多文章提及过！下面我们一起再来复习一下！

我们可以这么写！

(function(){

})()

当然也可以如下写：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

方法二

另外一种方法可以如下写：

$(function() {

    $('#haorooms').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

        }
    })
})

$(function() {}）这个是$(document).ready(function(){})的简写！

方法三 （借鉴留言）

感谢@风萧萧兮易水寒1974 留言！

他的方法的核心是

tmp.charAt(i)

当输入是4的倍数的时候，返回空格+输入字符，否则返回输入字符！

代码如下：

document.getElementById("yourId").addEventListener("input", function(){
    var op="";
    var tmp = document.getElementById("yourId").value.replace(/\D/g, "");
    for (var i=0;i<tmp.length;i++)
    {
        if (i%4===0 && i>0)
        {
            op = op + " " + tmp.charAt(i);
        } else {
            op = op + tmp.charAt(i);

        }
    }
    document.getElementById("yourId").value = op;
});

jquery

$(document).on('input propertychange', '#yourId', function(){
    var op="";
    var tmp = $(this).val().replace(/\D/g, "");
    for (var i=0;i<tmp.length;i++)
    {
        if (i%4===0 && i>0)
        {
            op += " " + tmp.charAt(i);
        } else {
            op += tmp.charAt(i);
        }
    }
    $(this).val(op);
});

这种写法虽然有效，但是呢，我个人觉得效率可能有点问题（虽然感觉不出来）。

每次输入的时候，都会把值置为空！然后循环值的长度，再四位加一个空格，每次输入都会循环一次！这样太浪费效率了！不过还是感谢风萧萧兮易水寒 的思考及见解。谢谢！

小结

第一种方法，当数字输入的时候，前面所有的输入，包括字母都会切分成4个一个空格，但是第二种方法，假如后面输入的是数字，只有当前输入数字才会被加入空格！个人感觉第二种方法效率更高！

转自：http://www.haorooms.com/post/js_yinghangkahao