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

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

我试图用一个掩码插件创建一个掩码，但有几个错误。我也试着用ToLocalestring

我的面具和结果都有问题。 这就是预期的结果：

HTML

---

}))

尝试使用正则表达式解析所有非数字和十进制符号。 下面的toDigits函数正好实现了这一点，并允许您在此之后使用常规数学

$（文档）.ready（函数（）{
//添加maskMoney侦听器
$（'#base'）.keyup（计算）；
$（“#ticket”）.keyup（计算）；
});
函数计算（e）{
常数百分比=0.38，
baseValToDigits=toDigits（$（'#base'）.val（）| | 0），
ticketValToDigits=toDigits（$（“#ticket”）.val（）| | 0），
costVal=baseValToDigits*ticketValToDigits，
成本百分比=成本值*百分比；
//将成本百分比格式化为货币
$（'#cost'）.val（costval.trigger（'input'））
}
数字功能（val）{
常量isNeg=/（\（.*）| ^[-]/.test（val），
digits=parseFloat（val.toString（）.replace（/[^0-9\.]+/g，”）；
返回isNeg？数字*-1:+数字；
}

自然数


货币价值


货币总额

它在这里可以正常工作，没有任何插件。你可以定制一些东西来适合你的实际项目。希望下一个HTML标准将最终实现输入字段的内联本地化

---

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

$（文档）.ready（函数（）{
$（'form'）。在（'change'，'base'，'ticket'，函数（）上{
var ticket=parseFloat（$（'#ticket'）.val（）.replace（'，'，'）；
计算（）；
如果（！isNaN（票））{
$（#ticket'）.val（欧洲格式（ticket））；
}
});
函数计算（e）{
var ticket=parseFloat（$（'#ticket'）.val（）.replace（'，'，'）；
var total=parseFloat（$（'#base'）.val（））*票证*0.38；
如果（！isNaN（总计））{
美元（“#成本”）.val（欧元格式（总计））；
}
}
函数欧洲格式（num）{
return（num.toFixed（2）.replace（'.'，'.'，'）.replace（/（\d）（？=（\d{3}）+（？！\d））/g，'$1'.+'€'））
} 
});

自然数


货币价值


货币总额
您可以使用
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）；
如果（i）{
var tv=parseFloat（d.ticket.value.replace（/，/g'）；
d、 成本价值=货币（d.base.value*tv*.38）；
d、 票面价值=当前（电视）；
});
})

自然数


货币价值


货币总额
您能告诉我们预期的货币价值格式吗？你和马斯克莫尼试过了吗。。。请在你的问题中添加期望的格式我在帖子中添加了一个结果示例。我试过一个面具，事实上是一个更有效的面具。但有时总货币不显示十进制数字。它对计算起作用，我用maskMoney表示小数，但总货币不显示掩码，除非我用光标单击。我修改了上面的代码。您可以在maskMoney侦听器中重新添加，也可以在设置成本字段的值之前正确设置值的格式。请参见上述代码中的注释了解两种选项谢谢。一切正常。但是我认为maskMoney有一些局限性，因为我总是必须点击结果才能看到小数。如果这是jquery的maskMoney，我确实发现了一个模糊信息：重要的是：如果你试图将maskMoney绑定到一个只读字段，那么什么也不会发生，因为我们完全忽略了只读字段。因此，如果您有一个只读字段，尝试将maskMoney绑定到它，它将不起作用。即使更改字段以删除readonly属性，也需要重新绑定maskMoney才能使其正常工作。我不知道我是否理解得很好。我已经从输入中删除了“只读”。但这并不重要，因为我选择该字段时，该字段只显示货币格式。这是一个非常好的选择。但我不知道用户是否可以快速键入。obs。我还在等待HTML的内联解决方案。使用点而不是逗号对我来说已经是一个问题：）在我的国家，我们只使用逗号表示小数。。。是的，这应该添加到本地人中！我刚刚用onChange事件更新了它，在这种情况下它更方便用户。谢谢。完全更友好。但是票面价值不接受分钱，它接受！这就是我上面提到的javascript的问题。。。您需要使用点键入：）我确实记得在发票表单中为客户找到了解决方法。我看看我能做些什么香草足够好了。但是在这种情况下，票证不是货币格式。有很多方法可以解决这个问题：要么在输入字段后面打印货币符号（作为标签的一部分），要么——正如我刚才在回答中所做的那样——通过将它放在输入字段中并在处理过程中忽略它，在字段中“允许”它。当然，您可以在每次编辑值后将其“强制”返回，但由于我的操作是由keyup事件触发的，这将造成严重破坏。因此，在我的示例中，我只接受带和不带货币符号的值。实际上，符号并不重要，但小数很重要
<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>

$(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')
}