如何使用 AutoNumeric 计算总数

Question

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

如何修复

当我使用 JS 函数计算总和时出现，但没有像我想要的那样格式化 AutoNumeric
当鼠标悬停在计算字段上时，它会消失

 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" 属性 — 这些元素被设计为 "editable".

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>

如何使用 AutoNumeric 计算总数

How to calculate total with AutoNumeric

html

javascript

autonumeric.js