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 pattern 属性仅允许数值。

<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

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

5 个答案: