带逗号的数字计算输出

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

也不是那么人性化，以阻止使用箭头键，甚至任意键为这一问题。你的限制也消除了用shift-arrow选择文本的可能性，用backspace删除输入。当他们确实用鼠标移动光标位置时，只要他们键入，光标就会翻转到最后。这是不正常的行为，会让用户感到沮丧。

让他们输入他们想要的东西，只是清理，当他们退出输入框。这是更加用户友好的。

所以我建议只有当焦点离开输入栏应用数字格式，并作为重点再次进入尽快删除所有格式。

这里也是一个正则表达式replace应用的格式一气呵成：

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

这里是updated fiddle。