コンマは複数の最初の入力フィールドでのみ動作します

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が必要です。その後、それらをループする必要があります。これらの線に沿って：トリックはあなたが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こと。 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">