Как рассчитать общую сумму с помощью AutoNumeric

Question

Я использую http://autonumeric.org/ или 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() делать свои расчеты.

Насколько я знаю, вы можете безопасно удалить contenteditable="true" атрибут из <input/> элементы - они предназначены для "редактирования".

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>