javascript - 计算后为值添加逗号分隔符

Question

计算时，我设置了 2 个将进行乘法运算的输入字段。文本框将接受数字输入，同时显示值的逗号分隔。在乘法之前，我删除逗号，然后将结果传递到文本框 3。在下面的实例中，如何使用逗号分隔向最终用户显示答案？感谢您的大力帮助。

function calculate() {

  var E1 =   $("#E1").val().split(",").join(""); 
  var E2 =   $("#E2").val().split(",").join("");
  
  var result = E1*E2;
  $("#E3").val(result);
  
}


//For comma seperation
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="form-group">
    <label>Value 01</label>
    <input class="form-control number" type="tel" id="E1" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 02</label>
    <input class="form-control number" type="tel" id="E2" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 03 (Result)</label>
    <input class="form-control number" type="tel" id="E3"  />
</div>

Answer 1

刚刚添加了 digits 函数，该函数返回每三位数字的逗号。希望这对您有帮助。

function calculate() {

  var E1 = $("#E1").val().split(",").join("");
  var E2 = $("#E2").val().split(",").join("");

  var result = E1 * E2;
  $("#E3").val(result);
  $("#E3").digits();

}

$.fn.digits = function() {
  return this.each(function() {
    $(this).val($(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  })
}
//For comma seperation
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Value 01</label>
  <input class="form-control number" type="tel" id="E1" required oninput="calculate()" />
</div>

<div class="form-group">
  <label>Value 02</label>
  <input class="form-control number" type="tel" id="E2" required oninput="calculate()" />
</div>

<div class="form-group">
  <label>Value 03 (Result)</label>
  <input class="form-control number" type="tel" id="E3" />
</div>