使用 autoNumeric.js 更新输入字段答案

【问题标题】：Updating input fields with autoNumeric.js使用 autoNumeric.js 更新输入字段
【发布时间】：2018-10-01 13:48:15
【问题描述】：

我正在尝试将 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'
});

【问题讨论】：

标签： javascript jquery html jquery-plugins

【解决方案1】：

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

我没有在实际示例中对其进行测试（您应该提供），但这应该可以工作。

【讨论】：