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

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

前言

今天来讲讲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(){})的简写！