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

2016-12-14 10:13:00 8436 3 编辑:网站架构师伍林 来源:程序书籍

今天来讲讲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

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通