逗号仅适用于多个第一个输入字段

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做到通过阵列状收集一环。请参阅this answer（也是我的）中的各种“For Array-Like Objects”选项。

您也可以使用event delegation而不是挂钩每个输入上的事件（因为keyupdoes bubble）。

Answer 2

使用querySelectorAll选择所有元素，然后迭代它们并为它们添加事件侦听器。检查下面的代码段！

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, ','); 
 
     }); 
 
    }

<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">