標籤：style blog http color 使用 os 資料 io
題目比較晦澀，來張圖來說明要表達的效果：
第一張圖的效果就是，使用者輸入一個數字，上面就顯示一個大層，然後顯示輸入的數字，並把數字用空格按照每四位分割出來。好像在建行的網上銀行上面就有這種效果。第二個圖的效果就是使用者在一個文字框中輸入一串數字，然後再游標離開的時候，把數字按照每三位用逗號給分割開來，類似於老外的金錢輸入效果。
效果一 同步顯示分割分割輸入
這種效果中，仿造的就是輸入銀行卡子類的，故只能夠輸入數字，需要禁用使用者輸入的其它字元下面是幾種實現方式。先貼上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 };onkeydown 方式實現
這種方式在實現上麻煩的就是在使用者刪除資料的時候，要進行判斷，而且還存在瀏覽器安全色性問題。還有就是需要拼接使用者輸入的資料，但是它的同步性很好
實現方式二：只是利用鍵盤的 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 };onkeyup 方式實現
這種方式的實現中，有一個不好的就是，當使用者輸入非數位時候，用正則去替換掉，因為輸入的字元已經在介面上了，突然沒有了，體驗下不好。
實習方式三：綜合上面兩種方式
結合上面兩種方式的優點，可以再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 };Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
