如何将同时包含自然值和货币的字段相乘？

Question

我正在尝试将计算器从Excel电子表格复制到网页。第一个字段是自然数的输入（不带逗号），第二个字段是某些货币值（带逗号，点等），第三个字段是合计值，但具有定义的值（例如0.38美分） ）。两个字段都必须相乘并在第三个字段中给出结果。

我尝试使用遮罩插件创建遮罩，但是有几个错误。试图也使用toLocaleStrings。

我在蒙版和结果上有问题。那是预期的结果：

HTML

<form>
<!-- simple number to start the calculation -->
<label>Natural Number</label>
<input type="text" id="base" />
<br>
<!-- currency including the cents -->
<label>Currency value</label>
<input type="text" id="ticket" />
<br>
<!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
<label>Currency total</label>
<input type="text" id="cost" readonly /></form>

JQUERY

$(document).ready(function(){
$('#cost').mask('000.000.000.000.000,00', {reverse: true});

$('#base').keyup(calculate);
$('#ticket').keyup(calculate)

function calculate(e) {
$('#cost').val($('#base').val() * $('#ticket').val() * 0.38).trigger('input')
}

}）;

Answer 1

尝试使用正则表达式解析所有非数字和十进制符号。下面的toDigits函数可以完成此操作，然后允许您使用常规数学。

$(document).ready(function(){
  //add maskMoney listener
  $('#base').keyup(calculate);
  $('#ticket').keyup(calculate);
});

function calculate(e) {
  const percent = 0.38,
    baseValToDigits = toDigits($('#base').val() || 0),
    ticketValToDigits = toDigits($('#ticket').val() || 0),
    costVal = baseValToDigits * ticketValToDigits,
    percentageOfCostVal = costVal * percent;
  //format percentageOfCostVal as currency
  $('#cost').val(percentageOfCostVal).trigger('input')
}
function toDigits(val) {
    const isNeg = /(\(.*\))|^[-]/.test(val),
        digits = parseFloat(val.toString().replace(/[^0-9\.]+/g,""));
    return isNeg ? digits * -1 : +digits;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <!-- simple number to start the calculation -->
  <label>Natural Number</label>
  <input type="text" id="base" />
  <br>
  <!-- currency including the cents -->
  <label>Currency value</label>
  <input type="text" id="ticket" />
  <br>
  <!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
  <label>Currency total</label>
  <input type="text" id="cost" readonly />
</form>

Answer 2

这里没有任何插件。您可以定制一些适合您实际项目的东西。希望下一个HTML标准最终将内联本地化带入输入字段。

---

[UPDATE]使用较少延迟的Onchange而不是keyup事件处理程序，将可以简化键入并变得更加用户友好。因此，我们可以使用正则表达式模式来设置货币值的格式。

$(document).ready(function(){

$('form').on('change','#base,#ticket',function() {
  var ticket=parseFloat($('#ticket').val());
  calculate();
  if(!isNaN(ticket)){
  $('#ticket').val(EuroFormat(ticket));
  }
  });

function calculate(e) {
var ticket=parseFloat($('#ticket').val());
var total = parseFloat($('#base').val()) * ticket * 0.38;
if(!isNaN(total)){
$("#cost").val(EuroFormat(total));
}

}

function EuroFormat(num) {
  return (  num.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'  ) 
} 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<!-- simple number to start the calculation -->
<label>Natural Number</label>
<input type="text" id="base" autocomplete="off"/>
<br>
<!-- currency including the cents -->
<label>Currency value</label>
<input type="text" id="ticket" autocomplete="off"/>
<br>
<!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
<label>Currency total</label>
<input type="text" id="cost" readonly"/></form>