逗號僅適用於多個第一個輸入字段

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