JS中同步顯示並分割輸入的數字字符串

時間 2019-12-10

原文原文鏈接

題目比較晦澀，來張圖來講明要表達的效果：css

第一張圖的效果就是，用戶輸入一個數字，上面就顯示一個大層，而後顯示輸入的數字，並把數字用空格按照每四位分割出來。好像在建行的網上銀行上面就有這種效果。第二個圖的效果就是用戶在一個文本框中輸入一串數字，而後再光標離開的時候，把數字按照每三位用逗號給分割開來，相似於老外的金錢輸入效果。html

效果一同步顯示分割分割輸入

這種效果中，仿造的就是輸入銀行卡子類的，故只可以輸入數字，須要禁用用戶輸入的其它字符下面是幾種實現方式。先貼上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 方式實現

這種方式在實現上麻煩的就是在用戶刪除數據的時候，要進行判斷，並且還存在瀏覽器兼容性問題。還有就是須要拼接用戶輸入的數據，可是它的同步性很好ide

實現方式二：只是利用鍵盤的 onkeyup 事件

在keyup事件中，相比就比較簡單，引用當這個事件觸發的時候，用戶輸入的值已經在界面上了，咱們能夠直接獲取到。並且若是用戶是刪除，也不須要關係是經過鼠標選中刪除仍是直接按退格鍵刪除，由於在刪除鍵擡起的時候，界面上的數據已經刪除了。代碼以下：this

 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 方式實現

這種方式的實現中，有一個很差的就是，當用戶輸入非數字的時候，用正則去替換掉，由於輸入的字符已經在界面上了，忽然沒有了，體驗下很差。spa

實習方式三：綜合上面兩種方式

結合上面兩種方式的優勢，能夠再keydown下面判斷用戶的非法輸入，在keyup裏面對數據進行替換，代碼以下：code

 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中的代碼以下：htm

 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     };