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());
}

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

使用autoNumeric.js更新输入字段

1 个答案: