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

标签 javascript

当您输入数字时,我尝试在每个文本输入中动态插入逗号。但是,它仅适用于第一个输入,我不明白为什么。

这是我的代码:

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/

相关文章:

javascript - 设置值后Codemirror自动格式化

javascript - 如何在一个函数中设置多个 id

javascript - React NPM 包(Dragula)在开发中有效,但在生产中无效

javascript - $rootScope.digest 没有完成 Jasmine 中的 promise

javascript - 我怎样才能用 Ramda.js 做得更好

javascript - 如何在javascript中处理多次返回

javascript - 将路径 url 附加到 Javascript 对象

javascript - Ajax 成功后 Node Express 路由到新窗口位置

JavaScript:相对于父级单击时增加变量值

Javascript - 替换页面中以以下开头的所有字符串