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。

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

 onkeypress - onkeydown -

实现方法一

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

方法一解释

我们可以这么写！

(function(){

})()

当然也可以如下写：

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

方法二

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

$(function() {
    $('#haorooms').on('keyup', function(e) {
     //只对输入数字时进行处理
       if((e.which >= 48 && 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(){})的简写！

总结：

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