Обновление полей ввода с помощью autoNumeric.js

Question

Я пытаюсь включить autoNumeric.js в построенный мной калькулятор.Используя обычный jquery, он работает нормально, но затем, когда я пытаюсь дополнить autoNumeric, он ломается.Это мой HTML

<form id="form1"           
   <input value="" type="text" class='t1'/> 
   <input value="" type="text" class='t2'/>
   <input value="" type="text" class='t3'/>
   <input value="" type="text" class='t4'/>
</form>`

Пока у меня есть следующие скрипты.Одна ошибка, которую я замечаю, состоит в том, что в моем первом поле ввода, когда я набираю что-либо более 999, ввод 4 автоматически NaN.Мой первый ввод, кажется, дает мне запятые и десятичные дроби, но я не могу заставить остальные работать.Любые предложения будут великолепны

$(".t1, .t2, .t3").change(function() {
  $(".t4").prop("readonly",
  true).autoNumericInstance($(".t1").autoNumericInstance() *  $(".t2").autoNumericInstance() * $(".t3").getNumber());
  });

    $('.t1, .t4').each(function() {
var autoNumericInstance = new AutoNumeric($(this)[0], AutoNumeric.getPredefinedOptions().dotDecimalCharCommaSeparator);
  });

$("input").autoNumeric('init', {
  aSep: '.',
  aDec: ',',
  aForm: true,
  vMax: '999999999',
  vMin: '0'
});

Answer 1

Вы смешиваете старый синтаксис 1.9.*, который требовал jQuery в качестве зависимости, с последней бесплатной jQuery-версией с автонумерацией (в настоящее время v4.4.3).

Вы также можете значительно упростить свой код.Вместо того, чтобы делать:

$('.t1, .t4').each(function() {
    var autoNumericInstance = new AutoNumeric($(this)[0], 
        AutoNumeric.getPredefinedOptions().dotDecimalCharCommaSeparator);
});

просто бросьте jQuery и используйте:

const autoNumericInstancesArray = new AutoNumeric.multiple('.t1, .t4');

Весь ваш код может быть также свободен от jQuery с помощью:

const nodeArray = [... document.querySelectorAll('.t1, .t2, .t3')];
nodeArray.forEach(n => n.addEventListener('change', updateCalculator, false));

const [t1, t2, t3, result] = AutoNumeric.multiple('input', {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    formatOnPageLoad: true,
    maximumValue: '999999999',
    minimumValue: '0',
});
result.update({ readOnly: true });

updateCalculator() {
    result.set(t1.getNumber() * t2.getNumber() * t3.getNumber());
}

IЯ не проверял его на живом примере (который вы должны были предоставить), но это должно сработать.