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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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。

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>

实现方法一

?

1 2 3 4 5 6 7 8 9 10 11 12

<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来实现，代码如下：

?

1 2 3 4 5 6 7 8 9 10

!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(){}());

方法二

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$(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的倍数的时候，返回空格+输入字符，否则返回输入字符！

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(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