如何定位页面上的所有输入？ [复制]

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)

My jsFiddle

Answer 1

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

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

Updated Fiddle

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

// 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);
}

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

---

如果您的页面中包含 jQuery

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

演示

$('input[type="number"]').on('input', function(e) {
  // 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 = "";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<label for="first">First</label>
<br>
<input type="number" min="0" />
<br>
<br>
<label for="Second">Second</label>
<br>
<input type="number" min="0" />

---

我建议你使用 HTML5 模式 属性来只允许数值。

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

Answer 2

使用document.querySelectorAll() 代替document.querySelector()。

querySelectorAll() 方法返回所有匹配的元素，而 querySelector() 方法只返回第一个，这就是你得到的。

Answer 3

querySelector 只返回一个元素：第一个匹配元素。

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

如果您还想按类型过滤输入，请使用：

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

然后你可以像这样添加事件监听器：

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

---

现在，既然您使用的是 jQuery，不妨利用它：

$('body').on('input', 'input[type=number]', yourFunction);

这就是你所需要的。

Answer 4

使用 jQuery 这很容易：

$('input[type=number]')

Answer 5

由于问题是 jQuery 标记的，您可以使用 attribute equals selector:

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

代码：

$('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 = "";
    }
});

演示：http://jsfiddle.net/IrvinDominin/31t2Lafw/

如果可能倾向于避免使用新的或支持不佳的事件，例如input：https://developer.mozilla.org/en-US/docs/Web/Events/input