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


Java脚本

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,而不是在每个输入上都挂起事件(因为keyup does bubble)。

关于javascript - 逗号仅适用于多个的第一个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42817463/

相关文章:

javascript - React useEffect 中的间隔 - 将其存储在 useRef Hook 中以保留值超时警告

javascript - 将对象存储在本地存储中

带有 getter 和 setter 的 JavaScript 类导致 RangeError : Maximum call stack size exceeded

javascript - 有没有办法动态设置Highchart选项?

javascript - Node.js 客户端 API key

javascript - 如何从网页打开 native 应用程序

javascript - 将ajax数组数据加载到select2下拉格式中

javascript - 如何在 HTML 中显示日期?

javascript - iOS WebApp 不允许定位服务?

javascript - Font Awesome CSS伪元素