如何使用 AutoNumeric 计算总数

Question

我正在使用http://autonumeric.org/或https://github.com/autoNumeric/autoNumeric/blob/master/README.md

怎么修

• 当我使用 JS function 来计算总和时出现，但不像我想要的那样格式化 AutoNumeric

• 当鼠标 hover 计算字段时，它消失了

 var taxRate = 0.10 function calculateAmount() { var elemsAmount = document.getElementsByName("tAmount") var total = 0 elemsAmount.forEach(function(e){ total += Number(e.value.replace(',','')) }) document.getElementById("total").value = total document.getElementById("tax").value = total*taxRate document.getElementById("finalTotal").value = total+total*taxRate } document.getElementById("tableBox").addEventListener("change",calculateAmount) new AutoNumeric.multiple('[contenteditable="true"]', 'dotDecimalCharCommaSeparator')

 <script src="https://unpkg.com/autonumeric" type="text/javascript"></script> <div id="tableBox"> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount" contenteditable="true"> <label>input</label> </div> </div> </div> <,-- name tableRow --> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount" contenteditable="true"> <label>input</label> </div> </div> </div> <.-- name tableRow --> </div> <,-- id tableBox --> Auto JS Calculation fields <div class="input-field"> <input type="text" id="total" contenteditable="true"> <label for="total">Total</label> </div> <div class="input-field"> <input type="text" id="tax" contenteditable="true"> <label for="tax">Tax</label> </div> <div class="input-field"> <input type="text" id="finalTotal" contenteditable="true"> <label for="finalTotal">Final Total</label> </div> Expect output #,###.##<br> Also the problem is when mouse hover on the Calculation field, it disappears

先感谢您

Answer 1

您应该初始化并保存 Autonumeric 字段并使用 Autonumeric API 使用.set()更新值。 您可以对输入字段执行相同操作并使用.getNumber()进行计算。

据我所知，您可以安全地从<input/>元素中删除contenteditable="true"属性——这些元素被设计为“可编辑”的。

 const taxRate = 0.10 const config = 'dotDecimalCharCommaSeparator' const totalInput = new AutoNumeric('#total', config) const taxInput = new AutoNumeric('#tax', config) const finalTotalInput = new AutoNumeric('#finalTotal', config) const elemsAmount = new AutoNumeric.multiple('[name="tAmount"]', config) const tableBox = document.getElementById('tableBox') function calculateAmount() { let total = 0 elemsAmount.forEach(function(e) { total += e.getNumber() }) totalInput.set(total) taxInput.set(total * taxRate) finalTotalInput.set(total + total * taxRate) } tableBox.addEventListener('change', calculateAmount)

 <script src="https://unpkg.com/autonumeric" type="text/javascript"></script> <div id="tableBox"> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount"> <label>input</label> </div> </div> </div> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount"> <label>input</label> </div> </div> </div> </div> Auto JS Calculation fields <div class="input-field"> <input type="text" id="total"> <label for="total">Total</label> </div> <div class="input-field"> <input type="text" id="tax"> <label for="tax">Tax</label> </div> <div class="input-field"> <input type="text" id="finalTotal"> <label for="finalTotal">Final Total</label> </div>