Javascript 如何针对页面上的所有输入？

我正试图针对页面上的所有输入

type=“number”

，但只有第一个输入被触发。有人知道我为什么以及如何针对所有输入元素吗

我的JS：

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)

---

使用

document.querySelector（）

而不是

document.querySelector（）

queryselectoral（）

方法返回所有匹配的元素，而

querySelector（）

方法只返回第一个元素，这就是您得到的元素。

用于选择所有匹配选择器的元素。选择所有输入类型

number

元素

var allNumberInputs = document.querySelectorAll('input[type="number"]');

然后需要更新绑定元素上事件的代码。 循环所有匹配的元素并分别绑定每个元素上的事件

//选择您的输入元素。
var numInput=document.querySelectorAll（'input[type=“number”]”）；
for（var i=0，len=numInput.length；i

首先






第二

只返回一个元素：第一个匹配的元素

您可以使用。然后将事件侦听器附加到返回的元素

var allNumberInputs = document.querySelectorAll('input[type="number"]');

如果还希望过滤输入的类型，请使用以下命令：

var numInputs = document.querySelectorAll('input[type=number]');

然后您可以像这样添加事件侦听器：

for (var i = 0; i < numInputs .length; i++) {
    numInputs[i].addEventListener("click", yourFunction, false);
}

---

这就是您所需要的。

使用jQuery很容易：

$('input[type=number]')

---

由于问题带有jQuery标记，因此可以使用：

选择具有指定属性且具有值的元素 完全等于某个值

代码：

演示：

---

如果有可能避免使用新的或支持较差的事件，例如

input

：

为什么不试试jQuery？它有很短的语法$（'input[type=number]'）@Cerbrus对我来说也是新的：在这个问题中，我建议不要使用那些不太受支持的功能。或者至少添加一个通知提及此事。@Cerbrus是的，我同意你的意见，但在操作代码中哦，你完全正确！我忽略了这一点。@Cerbrus没问题，像往常一样，我在这里学到了另一件事：-）我忘记了循环事件，你是对的。非常感谢。成功了。我认为这一个是正确的，但是所有其他答案也应该有效，但是你的答案对我来说更有意义@欢迎光临！如果已经加载jQuery，请使用jQuery方法，如答案中的第二个代码段所示，如果没有，请删除jQuery标记

。我不知道。Thanks@SheraliTurdiyev欢迎：）

$('input[type="number"]').on('input',function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
});