如果有人可以帮助我解决AutoNumeric.js的简单应用程序,我将非常乐意。我有以下代码:

小提琴链接:https://jsfiddle.net/yu1s9nrv/8/



<table id="shareInput" class="table_standard">
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Growth</th>
    <th>Yield</th>

  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>


  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>

  </tr>
</table>

<script>
  window.onload = function() {


    const anElement = new AutoNumeric('.input_field_medium_pct', 0, {
      suffixText: "%"
    });

  };

</script>


我期望的输出是对于具有input_field_medium_pct类的所有字段具有所需的AutoNumeric格式,但是它仅格式化该类的第一个字段。该文档的内容如下:


  // AutoNumeric构造函数类也可以接受字符串作为CSS
  选择器。在后台使用QuerySelector并将其自身限制为
  仅找到的第一个元素。 anElement =新
  AutoNumeric('。myCssClass>输入'); anElement =新
  AutoNumeric('。myCssClass> input',{选项});


取自:https://github.com/autoNumeric/autoNumeric#initialize-one-autonumeric-object

我是JS的新手,并且发现AutoNumeric文档说明有些混乱,是否有人遇到过此问题或是否能够弄清为什么会这样?提前致谢。

最佳答案

您需要使用Autonumeric.multiple一次将其应用于多个元素。

 const anElement =  AutoNumeric.multiple('.input_field_medium_pct', 0, {
      suffixText: "%"
 });


检查working jsfiddle

另外,请查阅文档https://github.com/autoNumeric/autoNumeric#initialize-multiple-autonumeric-objects-at-once

10-05 22:34