当您输入数字时,我尝试在每个文本输入中动态插入逗号。但是,它仅适用于第一个输入,我不明白为什么。
这是我的代码:
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, ',');
});
最佳答案
因为您只将其连接到第一个元素。要选择所有这些,您需要 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 中的各种“对于类数组对象”选项(也是我的)。
您也可以考虑使用 event delegation而不是在每个输入上 Hook 事件(自 keyup
does bubble )。
关于javascript - 逗号仅适用于多个的第一个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42817463/