js實現input中輸入數字,控制每四位加一個空格(銀行卡號格式)

2016-12-14 4359 0 編輯:網站架構師伍林 來源:程序書籍

今天來講講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="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 ");

        }

      };

   }

}();

方法一解釋

上面主要是運用了一些正則表達式,我們可以這么寫!

(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(){})的簡寫!

小結

第一種方法,當數字輸入的時候,前面所有的輸入,包括字母都會切分成4個一個空格,但是第二種方法,假如后面輸入的是數字,只有當前輸入數字才會被加入空格!

input

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾