當我按回空格時，逗號插入輸入框，並且數字未根據需要進行格式化

Question

我正在輸入框中輸入逗號作爲千分隔符（印度貨幣樣式），同時輸入。它工作正常。但是當我按下退格鍵時會插入不必要的逗號，逗號也不會重新排列。

例如：當我輸入1111111我得到結果11,11,111，但是當我按下退格鍵並使它11,11,11不調整。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('input.number').keyup(function(event) { 
     // skip for arrow keys 
     if(event.which >= 37 && event.which <= 40) return; 
     // format number 
     $(this).val(function(index, value) { 
      var x=value; 
      x=x.toString(); 
      var lastThree = x.substring(x.length-3); 
      var otherNumbers = x.substring(0,x.length-3); 
      if(otherNumbers != '') 
       lastThree = ',' + lastThree; 
      var res = otherNumbers.replace(/\D/g, "").replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree; 
      return res; 
      //document.getElementById("textInput").value=res; 
      //return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     }); 
    }); 
</script> 
<input class="number" style="width:140px; height:40px; outline: 0;" > 

Answer 1

添加在你的回調函數的簡單console.log(x)（後var x=value;線）顯示的是什麼問題：

當你已經在輸入字段1,111，然後按使用光標退格鍵在它的最後，你的函數輸入值是1,11（因爲退格刪除了當前值的最後一個字符） - 然後你用這個var lastThree = x.substring(x.length-3);這行代碼從最後三個字符開始，這會得到你,11，你然後再追加到你的最終結果 - 爲此你得到tw o連續的逗號。

我認爲解決這個問題的最簡單的方法是隻刪除所有逗號，你開始對價值的工作之前，

$(this).val(function(index, value) { 
    var x=value.replace(/,/g, ""); 
    // rest of code here 

- 這給你一個「乾淨」的價值上下工夫，沒有任何逗號它，所以你通過substring方法定位該值的部分的邏輯不會被它們拋出。

（和輸入字段的值始終是一個字符串，所以x=x.toString();是多餘的。）

Answer 2

<script type="text/javascript"> 
           $('input.number').keyup(
           function(event) 
            { 
             // skip for arrow keys 
             if((event.which >= 48 && event.which <= 57)||(event.which >= 96 && event.which <= 105)) 
             { 
             // format number 
             $(this).val(
             function(index, value) 
              { 
              var x=value; 
              var x=value.replace(/,/g, ""); 
              x=x.toString(); 
              var lastThree = x.substring(x.length-3); 
              var otherNumbers = x.substring(0,x.length-3); 
              if(otherNumbers != '') 
                lastThree = ',' + lastThree; 
              var res = otherNumbers.replace(/\D/g, "").replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree; 
              return res; 
              //document.getElementById("textInput").value=res;            
              //return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
              } 
              ); 
             } 
             else 
              {            

              if(event.which == 8) 
               { 
               $(this).val(function(index, value) 
                { 
                 var x=parseFloat(value.replace(/,/g, '')); 
                 x=x.toString(); 
                 var lastThree = x.substring(x.length-3); 
                 var otherNumbers = x.substring(0,x.length-3); 
                 if(otherNumbers != '') 
                    lastThree = ',' + lastThree; 
                 var res = otherNumbers.replace(/\D/g, "").replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree; 
                 return res; 
                 //document.getElementById("textInput").value=res;            
                 //return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
                } 
                );               
               } 
              else 
               { 
                return; 
               } 



              } 
            } 

           ); 
           </script>