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

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 标准最终将内联本地化引入输入字段。

---

[更新] 使用延迟较少的 Onchange 而不是 keyup 事件处理程序，可以更轻松地键入并变得更加用户友好。并允许使用逗号输入，该逗号将被替换为默认的预期点，以便 parseFloat 函数将其视为有效数字。 所以我们可以使用正则表达式模式来格式化货币值。

$(document).ready(function(){

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

function calculate(e) {
var ticket=parseFloat($('#ticket').val().replace(',', '.'));
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>

Answer 3

您可以使用Number.toLocaleString('en-us',{minimumFractionDigits:2,maximumFractionDigits:2})+'€' 获取您想要的货币格式。

const curr=v=>isNaN(+v)?'':(+v).toLocaleString('en-us',{minimumFractionDigits:2,maximumFractionDigits:2})+' €';
var d={};
['base','ticket','cost'].forEach((id,i)=>{
  d[id]=document.querySelector('#'+id); 
  if(i<2) d[id].addEventListener('change',ev=>{
    var tv=parseFloat(d.ticket.value.replace(/,/g,''));
    d.cost.value=curr(d.base.value*tv*.38);
    d.ticket.value=curr(tv);
  });
})

<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 的忠实粉丝，但我已经用 Vanilla JS 编写了以上内容。这很简单......