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

摘要:
前言今天,让我们来谈谈如何在js中实现输入数字,并控制每四位数加一个空格!主要用于填写表格时填写银行卡信息。我们需要输入的数字是四位数和一个空格!键盘上每个键对应的数字keycode8=BackSpace | keycode9=Tab | keycode12=Clearkeycode13=Enter | keycode16=Shift | keycode17=Controlkeycode18=Alt | keycode19=Pause | keycode20=CapsLockkeycode27=Escape | keycode32=空格| keycode33=Priorkeycode34=Next | keycode35=End | keycode36=Homekeycode37=Left | keycode 38=Up | keycode39=Rightkeycode40 e40=Down | keycode41=Select |keycode42=Printkeycode43=执行|keycode45=插入|keycode46=删除keycode47=帮助|keycode48=0|keycode49=1keycode50=2|keycode51=3|keycode52=4keycode53=5|keycode54=6|keycode55=7keycode56=8|keycode57=9|keycode65=Akeycode66=B|keycode67=C|keycode68=Dkeycode69=E|keycode70=F|keycode71=Gkeycode72=H|keycode73=I|keycode74=Jkeycode75=K|keycode76=L |键码77=M键码96=KP_ 0 |键码97=KP_ 1 |键码98=KP_2键码99=KP_3 |键码100=KP_4 |键码101=KP_5键码102=KP_6|键码103=KP_7|键码104=KP_8键码105=KP_9 |键码78=N |键码79=键码80=P |键码81=Q |键码82=R键码83=S |键码84=T |键码85=U键码86=V |键码87=W |键码88=X键码89=Y |键码90=Z |键码112=F1键码113=F2 |键码114=F3 |键码115=F4键码116=F5 |键码117=F6 |keycode118=F7 keycode119=F8| keycode120=F9| keycode121=F10keycode122=F1196至105是键盘数字键!因为按键是输入字符的Unicode。函数(){}();+函数(){}();-函数(){}();~函数(){}();~(); voidfunction(){}();;方法2另一个方法可以如下编写:$(function){$(‘#haorooms‘).on(‘keyup‘,function(e){//仅在以下情况下处理数字输入((

前言

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

免责声明:文章转载自《JS实现input中输入数字,控制每四位加一个空格(银行卡号格式)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Gson的入门使用Python安装下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

input输入框联想功能

一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的问题。还是直接上代码吧。 首先是一个简单的界面 auto.jsp <%@ page language="java" contentType="text/...

火狐和IE的window.event对象详解

FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的。但它主要检查FF方面的错误,对IE就无能为力了。要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测试了),用法也很方便。   至于JS对不同浏览器的兼容注意事项,的确很多,下面给你的也只是部分,一般建议还是采用jquery,prototype等一些已经处理...

Qt之设置QWidget背景色(QStyleOption-&amp;gt;drawPrimitive(QStyle::PE_Widget)方法比较有趣)

QWidget是所有用户界面对象的基类,这意味着可以用同样的方法为其它子类控件改变背景颜色。 Qt中窗口背景的设置,下面介绍三种方法。 1.使用QPalette2.使用Style Sheet3.绘图事件 一般我不用QSS设置窗口背景,也不建议使用。(这里是对于窗口而,如果是子部件当然可以)。因为窗口使用QSS设置背景之后,若子部件不使用同样的方式来设置,默...

触摸

  UIView支持触摸事件  因为继承于UIResponder,而且支持多点触摸,使用时需要定义UIView子类,实现触摸相关的方法 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;点击开始时执行此方法(多么见名知意) - (void)touchesEnded:(NSSet...

mysql 事件(Event) 总结

1 事件简介     事件(event)是MySQL在相应的时刻调用的过程式数据库对象。一个事件可调用一次,也可周期性的启动,它由一个特定的线程来管理的,也就是所谓的“事件调度器”。     事件和触发器类似,都是在某些事情发生的时候启动。当数据库上启动一条语句的时候,触发器就启动了,而事件是根据调度事件来启动的。由于他们彼此相似,所以事件也称为临时性触发...

adb shell按键操作(input keyevent)

前言:input keyeven操作发送手机上常用的一些按键操作 一、keyevent事件对应数字 电话键 KEYCODE_CALL: 拨号键 KEYCODE_ENDCALL: 挂机键 KEYCODE_HOME: 按键Home KEYCODE_MENU: 菜单键 KEYCODE_BACK: 返回键 KEYCODE_SEARCH: 搜索键 KEYCODE_...