JavaScript：入力方法の書式設定が間違っています

Question

私はJavaScript/JQueryのメソッドをプログラミングしています。これはユーザーが入力ボックスに入力した値を変換します。意味は、この入力を地域に対応させることです。 機能には、最初にゼロを削除し、1000個のセパレータと小数点区切り文字を配置します。

このユースケースでは、,シンボル1000セパレータとです。ドットに小数点を付ける

たとえば、次のような入力を次のように変換します。

• 12300 => 12,300.00
• 100 => 100.00
• 1023.456 => 1,023.456

さて番号の問題、入力次たとえば100未満 が不正な形式であるが、まだあります：

• 1 => 1、.00
• 2。 05 => 0.05
• => 20 20、Iは入力ボックスに10進数の値を入力しない場合=> 0.65

0.00

25.65は、私は不要な桁区切りを取得します。 10進数値を入力すると、小数点記号の前に内容が失われます。

コード：

$("#queryInstructedAmountFrom").change(function(){ 
         var amount = $("#queryInstructedAmountFrom").val(); 
         amount = removeZeros(amount); 
         var nonFractions = amount.match(/.{1,3}/g); 
         if(nonFractions == null) { 
          nonFractions = []; 
          nonFractions.push(amount); 
         } 

         var splittedValues = amount.split(/[,.]/); 
         amount = ""; 

         if(splittedValues.length == 1) { 
          amount += splittedValues[0]; 
          nonFractions = amount.match(/.{1,3}/g); 
          var firstIndex = amount.length % 3; 
          if(firstIndex != 0) { 
          var firstNumbers = amount.substr(0, firstIndex); 
          amount = amount.substr(firstIndex); 
          nonFractions = amount.match(/.{1,3}/g); 

          if(nonFractions == null) { 
           nonFractions = []; 
           nonFractions.push(amount); 
          } 

          amount = ""; 

          amount += firstNumbers; 
          amount += thousandSeparator; 
          } else { 
           amount = ""; 
          } 



          for(var i=0 ; i < nonFractions.length ; i++) { 
           amount += nonFractions[i]; 

           if(i < (nonFractions.length - 1) && nonFractions.length != 1){ 
            amount += thousandSeparator; 
           } 
          } 

          amount += decimalSeparator; 
          amount += "00"; 
         } else { 
          for(var i=0 ; i < splittedValues.length - 1 ; i++) { 
           amount += splittedValues[i]; 
          } 

          nonFractions = amount.match(/.{1,3}/g); 
          var firstIndex = amount.length % 3; 
          if(firstIndex == 0) { 
           nonFractions = amount.match(/.{1,3}/g); 
          } 

          if(firstIndex >= 1 && nonFractions != null) { 
           var firstNumbers = amount.substr(0, firstIndex); 
           amount = amount.substr(firstIndex); 
           nonFractions = amount.match(/.{1,3}/g); 

           if(nonFractions != null) { 
            amount = ""; 
            amount += firstNumbers; 
            amount += thousandSeparator; 
           } else { 
            nonFractions = []; 
            nonFractions.push(amount); 
           } 
          } else { 

           amount = ""; 
          } 


          for(var i=0 ; i < nonFractions.length ; i++) { 
           amount += nonFractions[i]; 

           if(i < (nonFractions.length - 1) && nonFractions.length != 1){ 
            amount += thousandSeparator; 
           } 
          } 

          amount += decimalSeparator; 
          amount += splittedValues[splittedValues.length -1]; 
         } 

     $("#queryInstructedAmountFrom").val(amount); 
     }); 
    }); 

function removeZeros(amount) { 
      while (amount.charAt(0) === '0') { 
       amount = amount.substr(1); 
      } 

      if(amount.length == 0){ 
      amount = "0"; 
      } 
      return amount; 
     } 

間違って何をして起こっていますか？

Answer 1

間違って起こっていますか？

私はほとんどすべてを言っています。あなたは、私はほとんどあなたのロジックを以下のない、非常に不明瞭な、汚いコードを持っていますが、例のコードでは、いくつかの重要なロジックミス、持っている：

1 1に変換されますが、。00ので：

var splittedValues = amount.split(/[,.]/); 

は、単一の要素[ '1']

var firstIndex = amount.length % 3; 

1％3 == 1で配列を作成しますので、あなたはamount += thousandSeparator;は千の区切りを追加し場合の条件、になるだろうが、それは、このブラジャーに入るので、あなたがその

2.05の後にあなたが何かを持っている場合にのみ、セパレータを追加する必要がありますが、間違っていますNCH：

var firstNumbers = amount.substr(0, firstIndex); // stores '2' into firstNumbers 
amount = amount.substr(firstIndex); // sets amount to empty string 

後に、nonFractionsがnull：その値は、あなたが持っても

を、失われている。すなわち

nonFractions = []; 
nonFractions.push(amount); 

しかしfirstNumbersは、一切使用しておりません：

nonFractions = amount.match(/.{1,3}/g); 
    var firstIndex = amount.length % 3; 
    if (firstIndex == 0) { 
     nonFractions = amount.match(/.{1,3}/g); 
    } 

nonFractions re-initの感覚は何ですか？

：

は、おそらくより多くのエラーと、このコードが失敗したエッジケースは、私はあなたが（他の回答のように）ライブラリを使用することをお勧めしたり、独自のコードを持つようにしたい場合は、ここにあなたが使用できる簡単なバージョンがあり、そこにあります

$(document).ready(function() { 
 
    $("#queryInstructedAmountFrom").change(function() { 
 
     var val = parseFloat(('0' + $("#queryInstructedAmountFrom").val()).replace(/,/g, '')); // convert original text value into float 
 
     val = ('' + (Math.round(val * 100.0)/100.0)).split('.', 2); 
 
     if (val.length < 2) val[1] = '00'; // handle fractional part 
 
     else while (val[1].length < 2) val[1] += '0'; 
 
     var t = 0; 
 
     while ((val[0].length - t) > 3) { // append thousand separators 
 
      val[0] = val[0].substr(0, val[0].length - t - 3) + ',' + val[0].substr(val[0].length - t - 3); 
 
      t += 4; 
 
     } 
 
     $("#queryInstructedAmountFrom").val(val[0] + '.' + val[1]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="queryInstructedAmountFrom">

Answer 2

なぜjQuery-Mask-Pluginを使用しませんか？

<input type="text" id="money" /> 

とちょうどプラグインを起動します。

$('#money').mask('000.000.000.000.000,00', {reverse: true}); 

Plunker：https://plnkr.co/edit/PY7ihpS3Amtzeya9c6KN?p=preview

Answer 3

が更新され、以下のコードを参照してください。

$(document).ready(function() { 
 
    $("#queryInstructedAmountFrom").change(function() { 
 
     var amount = $("#queryInstructedAmountFrom").val(); 
 
     amount = removeZeros(amount); 
 
     
 
     // format amount using 'ThousandFormattedValue' function 
 
     amount = ThousandFormattedValue(amount); 
 

 
     $("#queryInstructedAmountFrom").val(amount); 
 
    }); 
 

 
}); 
 

 
function removeZeros(amount) { 
 
    while (amount.charAt(0) === '0') { 
 
     amount = amount.substr(1); 
 
    } 
 

 
    if (amount.length == 0) { 
 
     amount = "0"; 
 
    } 
 
    return amount; 
 
} 
 

 
function ThousandFormattedValue(iValue) { 
 
    // declaring variables and initializing the values 
 
    var numberArray, integerPart, reversedInteger, IntegerConstruction = "", 
 
     lengthOfInteger, iStart = 0; 
 

 
    // splitting number at decimal point by converting the number to string 
 
    numberArray = iValue.toString().split("."); 
 

 
    // get the integer part 
 
    integerPart = numberArray[0]; 
 

 
    // get the length of the number 
 
    lengthOfInteger = integerPart.length; 
 

 
    // if no decimal part is present then add 00 after decimal point 
 
    if (numberArray[1] === undefined) { 
 
     numberArray.push("00"); 
 
    } 
 

 

 
    /* split the integer part of number to individual digits and reverse the number 
 
     ["4" , "3" , "2" , "1"] - after split 
 
     ["1" , "2" , "3" , "4"] - after reverse 
 
     "1234" - after join  
 
    */ 
 
    reversedInteger = integerPart.split("").reverse().join(""); 
 

 

 
    // loop through the string to add commas in between 
 
    while (iStart + 3 < lengthOfInteger) { 
 

 
     // get substring of very 3 digits and add "," at the end 
 
     IntegerConstruction += (reversedInteger.substr(iStart, 3) + ","); 
 

 
     // increase counter for next 3 digits 
 
     iStart += 3; 
 
    } 
 

 

 
    // after adding the commas add the remaining digits 
 
    IntegerConstruction += reversedInteger.substr(iStart, 3); 
 

 

 
    /* now split the constructed string and reverse the array followed by joining to get the formatted number 
 
     ["1" , "2" , "3" , "," ,"4"] - after split 
 
     ["4" , "," , "3" , "2" , "1"] - after reverse 
 
     "4,321" - after join 
 
    */ 
 
    numberArray[0] = IntegerConstruction.split("").reverse().join(""); 
 

 
    // return the string as Integer part concatinated with decimal part 
 
    return numberArray.join("."); 
 
}