題目比較晦澀，來張圖來說明要表達的效果：
第一張圖的效果就是，用戶輸入一個數字，上面就顯示一個大層，然后顯示輸入的數字，並把數字用空格按照每四位分割出來。好像在建行的網上銀行上面就有這種效果。第二個圖的效果就是用戶在一個文本框中輸入一串數字，然后再光標離開的時候，把數字按照每三位用逗號給分割開來，類似於老外的金錢輸入效果。
效果一 同步顯示分割分割輸入
這種效果中，仿造的就是輸入銀行卡子類的，故只能夠輸入數字，需要禁用用戶輸入的其它字符下面是幾種實現方式。先貼上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 };
這種方式在實現上麻煩的就是在用戶刪除數據的時候，要進行判斷，而且還存在瀏覽器兼容性問題。還有就是需要拼接用戶輸入的數據，但是它的同步性很好
實現方式二：只是利用鍵盤的 onkeyup 事件
在keyup事件中，相比就比較簡單，引用當這個事件觸發的時候，用戶輸入的值已經在界面上了，我們可以直接獲取到。而且如果用戶是刪除，也不需要關系是通過鼠標選中刪除還是直接按退格鍵刪除，因為在刪除鍵抬起的時候，界面上的數據已經刪除了。代碼如下：
1 document.getElementById('kaHao').onkeyup = kaHaoTwo;//注冊事件方法 2 3 function kaHaoTwo(evt){ 4 var e = evt || window.event; 5 6 //用正則去替換掉用戶輸入的非數字字符 7 this.value = this.value.replace(/[^\d]*/g,''); 8 9 //用正則去替換，(?=\d) 就是要求，如果要匹配成功，那么前面匹配的四位數字后面還必須再有以為數字。可以將后面替換的空格換成逗號或者其它字符就能夠看出正則中有和沒有這個匹配要求的區別 10 value = this.value.replace(/(\d{4})(?=\d)/g,'$1 ') 11 12 var gao = document.getElementById('gaoLiang'); 13 gao.innerHTML = value; 14 gao.style.display = 'block'; 15 };
這種方式的實現中，有一個不好的就是，當用戶輸入非數字的時候，用正則去替換掉，因為輸入的字符已經在界面上了，突然沒有了，體驗下不好。
實習方式三：綜合上面兩種方式
結合上面兩種方式的優點，可以再keydown下面判斷用戶的非法輸入，在keyup里面對數據進行替換，代碼如下：
1 document.getElementById('kaHao').onkeydown = kaHaoThreeDown; 2 document.getElementById('kaHao').onkeyup = kaHaoThreeUp; 3 4 function kaHaoThreeDown(evt){ 5 var e= evt || window.event; 6 if((e.keyCode > 57 || e.keyCode<48) && e.keyCode!=8){ 7 return false; 8 }; 9 }; 10 11 function kaHaoThreeUp(){ 12 var gao = document.getElementById('gaoLiang'); 13 gao.innerHTML = this.value.replace(/(\d{4})(?=\d)/g,'$1 '); 14 gao.style.display = 'block'; 15 };
效果二 在用戶輸入完成后將數字按照從右到左分割
用戶輸入完成，就代表的是失去了焦點，可以注冊一個onblur事件來完成。由於采用的是正則，而正則默認的是從左向右匹配(也許可以是從右向左匹配，不過我不清楚)，題目的要求是從右向左分割，所有代碼中先對字符串進行了一個反轉處理，分割成功后在進行一個翻轉就OK了。JS中的代碼如下：
1 docuemnt.getElementById('nums').onblur = splitNum; 2 3 function splitNum(evt){ 4 var value = this.value; 5 //先替換到所有的除了小數點以外的非數值數值 6 value = value.replace(/[^(\d.)]*/g,''); 7 //字符串沒有反轉方法，故需要先轉成數組 8 value = value.split('').reverse().join(''); 9 //可以嘗試不加正則后面的(?=\d),在輸入的數字剛好是3的整數倍時就會出現問題 10 value = value.replace(/(\d{3})(?=\d)/g,'$1,'); 11 this.value = value.split('').reverse().join(''); 12 };