使用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

您将需要jQuery作为依赖项的旧1.9.*语法与最新的无jQuery autoNumeric版本(当前为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());
}

我还没有在一个活生生的例子中对它进行测试(你应该已经提供了)，但是这应该可以工作。