Вычисление номеров Вывод с запятой

Question

У меня есть приложение для расчета, которое я создаю, и у меня есть он там, где ввод отображает запятую, и вычисление все равно может работать, несмотря на запятые, но теперь я не могу получить вывод для отображения с тысячами разделителей запятые. Я пробовал почти все, что мог придумать. Может кто-нибудь покажет мне, где я могу быть.

Вот мой сценарий:

jQuery(document).ready(function($) { 
      // SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED 
      $('#calc-top').bind('keyup change', function() { 
       var orderAmount = $('#orderAmt').val().replace('', ','); 
       if (orderAmount !== "" && $("#duration option:selected").val() !== "" && $("#debitFreq option:selected").val() !== "") { 
        $('div#calc-bottom').css('display', 'block'); 
       } else { 
        $('div#calc-bottom').css('display', 'none'); 
       } 
      }); 
     }); 

    jQuery(document).ready(function($){ 
     $("#orderAmt").keyup(function(event) { 
      // skip for arrow keys 
      if (event.which >= 37 && event.which <= 40) { 
       event.preventDefault(); 
      } 
      var $this = $(this); 
      var num = $this.val().replace(/,/gi, ""); 
      var num2 = num.split(/(?=(?:[0-9]{3})+$)/).join(","); 
      console.log(num2); 
      // the following line has been simplified. Revision history contains original. 
      $this.val(num2); 
     }); 
     }); 
     // end jQuery 

     // CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS 
     function calculate() { 
      var orderAmt = parseFloat(document.getElementById("orderAmt").value.replace(/,/g, '')); 
      var duration = document.getElementById("duration").value || 0; 
      var debitFreq = document.getElementById("debitFreq").value || 0; 
      var outputAmt = document.getElementById('outputAmt') || 0; 
      var numPayments = document.getElementById('numPayments') || 0; 

      // CALCULATE NUMBER OF PAYMENTS 
      if (debitFreq == 7) { 
       numPayments = Math.floor(duration/7); 
      } else if (debitFreq == 30) { 
       numPayments = Math.floor(duration/30); 
      } 
      document.getElementById('numPayments').innerHTML = numPayments; 

      // CALCULATE PAYMENT AMOUNT 
      var stepA = (orderAmt/numPayments); 
      var stepB = Math.floor((((15/1000) * (duration/360)) * 12) * orderAmt) || 0; 
      var stepC; 
      if (debitFreq == 7) { 
       stepC = 0.10; 
       //} else if (debitFreq == 30) { 
       //stepC = 0.05; 
      } else { 
       stepC = 0; 
      } 
      var stepD = 0; 
      //if ((duration == 30) && (debitFreq == 30)) { 
      //stepD = 0.05; 
      //} else { 
      //stepD = 0; 
      //} 
      var stepE = stepC - stepD; 
      var stepF = Math.floor((((15/1000) * (duration/360)) * 12) * orderAmt) || 0; 
      var stepG = Math.ceil(stepE * stepF); 
      var stepH = stepB - stepG; 
      var stepI = stepH/numPayments; 
      var monthlyPayments = stepI + stepA; 
      outputAmt.innerHTML = monthlyPayments.toFixed(2) || 0; 

      // OUTPUT WILL SHOW CORRECT DEBIT FORMATS BASED ON USER INPUT (i.e. 'week', 'weeks', 'month', 'months') 
      var outputDefault1; 
      if (document.getElementById("debitFreq").value == 7) { 
       outputDefault1 = "week"; 
      } else if (document.getElementById("debitFreq").value == 30) { 
       outputDefault1 = "month"; 
      } 
      document.getElementById("outputTerm1").innerHTML = outputDefault1; 

      var outputDefault2; 
      if (document.getElementById("debitFreq").value == 7) { 
       outputDefault2 = "weeks"; 
      } else if (document.getElementById("debitFreq").value == 30) { 
       outputDefault2 = "months"; 
      } 
      document.getElementById("outputTerm2").innerHTML = outputDefault2; 

     } 
     // end calculate function 

     // ONLY ALLOW NUMERIC INPUT, NO ALPHA OR SPECIAL CHARACTERS EXCEPT COMMAS 
     function isNumberKey(evt) { 
      var theEvent = evt || window.event; 
      var key = theEvent.keyCode || theEvent.which; 
      key = String.fromCharCode(key); 
      var regex = /^[0-9.,]+$/; 
      if (!regex.test(key)) { 
       theEvent.returnValue = false; 
       if (theEvent.preventDefault) { 
        theEvent.preventDefault(); 
       } 
      } 
     } 

     // TRIGGER EVENTS WHEN THE USER ENTERS DATA 
     var userinputNum = document.getElementById("orderAmt"); 
     userinputNum.oninput = calculate; 
     userinputNum.onkeypress = isNumberKey; 

     var userinputDays = document.getElementById("duration"); 
     userinputDays.onchange = calculate; 

     var userinputFreq = document.getElementById("debitFreq"); 
     userinputFreq.onchange = calculate; 

Вот моя скрипка: http://jsfiddle.net/qo5b7z93/

Любая помощь очень ценится!

Answer 1

Пожалуйста, посмотрите на эту updated FIDDLE, я думаю, что это должен делать то, что вам нужно.

function FormatNumber(nStr) { 
    nStr += ''; 
    x = nStr.split('.'); 
    x1 = x[0]; 
    x2 = x.length > 1 ? '.' + x[1] : ''; 
    var pattern = /(\d+)(\d{3})/; 
    while (pattern.test(x1)) { 
     x1 = x1.replace(pattern, '$1' + ',' + '$2'); 
    } 
    return x1 + x2; 
} 

Answer 2

Попробуйте это:

Примечание: ниже функция очень многословным для целей читаемость/понятности. Вы, вероятно, хотите, чтобы упростить для производства

Вы могли бы изменить outputAmt.innerHTML = monthlyPayments.toFixed(2) || 0
->outputAmt.innerHTML = placeCommas(monthlyPayments);

function placeCommas(number) { 
 
    if (number !== null && number !== undefined) { 
 
    number = number.toFixed(2); 
 
    var splitNum = number.split("."); 
 
    var num = splitNum[0]; 
 
    var decimals = splitNum[1]; 
 

 
    var numArr = num.split("").reverse(); 
 
    var commaArr = []; 
 
    for (var i = 0; i < numArr.length; i++) { 
 
     commaArr.push(numArr[i]); 
 
     if (i !== numArr.length - 1 && i % 3 === 2) { 
 
     commaArr.push(","); 
 
     } 
 
    } 
 
    num = commaArr.reverse().join(""); 
 
    number = num + "." + decimals; 
 
    return number; 
 
    } 
 
} 
 
console.log(placeCommas(0)); 
 
console.log(placeCommas(10)); 
 
console.log(placeCommas(100)); 
 
console.log(placeCommas(1000)); 
 
console.log(placeCommas(10000)); 
 
console.log(placeCommas(100000)); 
 
console.log(placeCommas(1000000)); 
 
console.log(placeCommas(10000000)); 
 
console.log(placeCommas(100000000)); 
 
console.log(placeCommas(1000000000));

Answer 3

Не так удобно блокировать использование клавиш со стрелками или даже любую клавишу в этом отношении. Ваши ограничения также исключают возможность выбора текста со стрелкой-стрелкой, чтобы удалить вход с обратным пространством. И когда они перемещают позицию курсора с помощью мыши, как только они печатают, курсор переворачивается до конца. Это ненормальное поведение и сделает пользователей разочарованными.

Позвольте им ввести то, что они хотят, и просто очистить, когда они выходят из окна ввода. Это намного удобнее.

Поэтому я предлагаю применять формат числа только в том случае, если фокус покидает поле ввода и удаляет все форматирование, как только фокус снова появляется.

Здесь также регулярное выражение replace применить форматирование на одном дыхании:

$(this).val() 
    .replace(/[^\d.]/gi, "") // clean-up 
    .replace(/\B(\d{3})(?=(?:\d{3})*(?:\.|$))/g, ',$1'); // format 

Вот updated fiddle.