js实现输入银行卡号隔四位添加一个空格

欧巴教我学习JavaScript的第二天，作为一个脚本绝缘体的我，实现了第一个小插件。

首先分析思路：

1、实时监控输入input框内的值，计算value的长度，当输入到第四个数字后添加一个空格；

2、限制input框内只能输入数字和空格，这个需要用正则表达式来实现比较简单，然后限制输入值得最大长度是多少；

3、实现以上功能后你就会发现删除input框内值得时候出现一个问题，当你删除第5个值时就会被检测到value的长度为4时，自动添加一个空格，从而成为死循环。解决方法，判断按键是否为Backspace键，如果是则不执行函数。

（里边有运用到jquery，用的时候加载jQuery库）

 1 <input type="text" id="test" name="textfield"  maxlength="23"  />
 2 
 3         <script>
 4             $("#test").keyup(function a (e) {
 5                 var obj = e;
 6                 if(obj.keyCode != 8){                                                        //判断是否为Backspace键，若不是执行函数；
 7                     var b = document.getElementById("test").value;        //定义变量input  value值；
 8                     var maxValue = 23;                                                       //限制输入框的最大值；
 9                     b = b.replace(/[^\d\s]/g,"");                                         //正则表达式：如果输入框中输入的不是数字或者空格，将不会显示；
10                    document.getElementById("test").value = b;               //把新得到得value值赋值给输入框；
11                    for(n=1;n<=4;n++){                                                
12                         if(b.length <=5*n-2||b.length>5*n-1){                    //判断是否是该加空格的时候，若不会，还是原来的值；
13                             b = b;
14                         }else{
15                             b = b +" ";                                                           //给value添加一个空格；
16                             document.getElementById("test").value = b;    //赋值给输入框新的value值；
17                         }
18                     }        19                     }
20                     
21             });
22         </script>

 

转载于:https://www.cnblogs.com/lxgandlz/p/5076275.html