前言
今天來講講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