Question

我正在尝试在键入数字时动态地在每个文本输入中插入逗号。但是，它只适用于第一个输入，我无法弄清楚原因。

这是我的代码：

HTML

<input type="text" class="number" id="annual-income" name="annual_income">
<input type="text" class="number" id="commission" name="commission">
<input type="text" class="number" id="bonus" name="bonus">
<input id="income-button" type="button" value="Next">

的Javascript

var el = document.querySelector('input.number');
  el.addEventListener('keyup', function (event) {
    if (event.which >= 37 && event.which <= 40) return;

    this.value = this.value.replace(/\D/g, '')
      .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  });

Answer 1

因为您只将它连接到第一个元素。要选择所有这些，您需要querySelectorAll。然后你需要循环它们。沿着这些方向：

// The function we'll use for handling keyup
function handleKeyUp(event) {
    if (event.which >= 37 && event.which <= 40) return;

    this.value = this.value.replace(/\D/g, '')
      .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// Get the list of inputs
var list = document.querySelectorAll('input.number');

// Add the event listener to them:
Array.prototype.forEach.call(list, function(el) {
    el.addEventListener('keyup', handleKeyUp);
});

forEach技巧只是通过querySelectorAll的类似数组集合循环的几种方法之一。查看各种＆＃34; For Array-Like Objects＆＃34; this answer中的选项（也是我的）。

您也可以考虑使用event delegation而不是在每个输入上挂钩事件（自keyup does bubble起）。

Answer 2

使用States I need these states to be set equal to 'US' StateID ------- AL CA HI NY etc...选择所有元素，然后迭代它们并为所有元素添加事件侦听器。请查看下面的代码段！

＆＃13;

querySelectorAll

＆＃13;

var allEls = document.querySelectorAll('input.number');

 for (var i=0; i<allEls.length; i++){
      var el = allEls[i];
      el.addEventListener('keyup', function (event) {
      if (event.which >= 37 && event.which <= 40) return;

      this.value = this.value.replace(/\D/g, '')
        .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      });
   }

＆＃13;

逗号仅适用于多个

2 个答案: