题目比较晦涩，来张图来说明要表达的效果：
第一张图的效果就是，用户输入一个数字，上面就显示一个大层，然后显示输入的数字，并把数字用空格按照每四位分割出来。好像在建行的网上银行上面就有这种效果。第二个图的效果就是用户在一个文本框中输入一串数字，然后再光标离开的时候，把数字按照每三位用逗号给分割开来，类似于老外的金钱输入效果。
效果一 同步显示分割分割输入
这种效果中，仿造的就是输入银行卡子类的，故只能够输入数字，需要禁用用户输入的其它字符下面是几种实现方式。先贴上HTML和CSS代码：
1 <html> 2 <head> 3 <style type="text/css"> 4 #gaoLiang{ 5 width:400px; 6 height:50px; 7 font-family:Candara; 8 color:red; 9 font-size:20px; 10 text-align:center; 11 line-height:50px; 12 display:none;/*这个层模式是隐藏的*/ 13 border:1px solid red; 14 } 15 </style> 16 </head> 17 18 <body> 19 <div id="gaoLiang"></div> 20 卡号：<input type="text" id="kaHao" /> 21 </body> 22 </html>
实现方式一：只是利用键盘的 onkeydown 事件
这个事件是在用户按下键盘后触发，也就是说，此时界面上是没有用户输入的数据的，但是可以通过event事件对象来获得用户输入的数据。要解决的问题就是手动的将用户输入的数据给拼接显示到界面上去，还有就是要考虑到用户选择删除的时候是通过退格键删除还是用鼠标选中以后删除。JS代码如下：
1 document.getElementById('kaHao').onkeydown = kaHao;//注册事件方法 2 3 function kaHao(evt){ 4 var e = evt || window.event; 5 //如果用户输入的非数字或者退格键就阻止输入 6 if((e.keyCode < 48 || e.keyCode>57) && e.keyCode != 8){ 7 return false; 8 }; 9 //拿到当前文本框中已经存在的值 10 var value = this.value; 11 //判断输入的是否是退格键 12 if(e.keyCode == 8){ 13 //如果是退格键就删除选中的文本或者最后一个。因为在Keydown事件中，是先执行代码后改变界面的值 14 var s=""; 15 //拿到用户选择的要删除的文本 16 if(typeof this.selectionStart == 'number'){ 17 s = this.value.substring(this.selectionStart,this.selectionEnd); 18 }else if( document.selection.createRange ){//IE8 及以下 19 s = document.selection.createRange().text; 20 }; 21 //如果没有选择长度就为0，那么就删除最后一个 22 if(s.length == 0){ 23 s = value.charAt(value.length-1) 24 }; 25 //执行删除数据 26 value = value.replace(s,''); 27 }else{ 28 //如果不是删除键就把当前的字符个拼接上去，由于JS中加号运算优先考虑数字，所有toString() 29 //IE6~8不支持e.key的写法 30 //value = this.value.toString() + e.key; 31 value = this.value.toString() + String.fromCharCode(e.keyCode); 32 }; 33 34 var line;//用来存放正则匹配的数字字符串 35 var strs=[];//存放已经提前的字符串 36 var reg = /(\d{1,4})/g;//正则。使用的是exec来匹配，可以使用replace更简单，在下一种方式中使用 37 while((line = reg.exec(value))){ 38 strs.push(line[0]); 39 }; 40 //按照正则，四个数为一组进行分割,由于匹配失败，返回一个null，直接导致后面的join报错，故不使用它 41 //strs = value.match(reg); 42 //在按照空格进行拼接 43 value = strs.join(' '); 44 //拿到层进行设置以及显示 45 var gao = document.getElementById('gaoLiang'); 46 gao.innerHTML = value;//innerHTML基本上不存在浏览器兼容性问题，故用它 47 gao.style.display = 'block'; 48 };