如何定位页面上的所有输入？

Question

我试图定位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)

我的jsFiddle

Answer 1

使用querySelectorAll选择与选择器匹配的所有元素。选择所有输入类型number元素。

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

更新了小提琴

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

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

// Select your input element.
var numInput = document.querySelectorAll('input[type="number"]');

for (var i = 0, len = numInput.length; i < len; i++) {
  // Listen for input event on numInput.
  numInput[i].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);
}

如果页面上包含jQuery

$('input[type="number"]')

演示

<label for="first">First</label>
<br>
<input type="number" min="0" />
<br>
<br>
<label for="Second">Second</label>
<br>
<input type="number" min="0" />

$('input[type="number"]')

我建议您使用HTML5 模式属性来仅允许数字值。

<input type="number" min="0" pattern="\d+" />