时间戳

首页 > 解决方案 > 计算后为值添加逗号分隔符

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

问题描述

计算，我设置了 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>

标签： javascriptjqueryhtml

解决方案

刚刚添加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>

推荐阅读