html - 如何防止用户在 Html 输入中输入负值

Question

我正在使用以下 html 输入元素在 Html 页面中收集产品数量，但用户仍然可以继续并手动输入负值。例如:我选择了文本框并输入 -100 并且输入字段接受了它而没有提示。

如何防止用户在 Html 输入元素中输入 0 和非负值？

<input type="number" id="qty" value="" size="3" min="1" />

Answer 1

由于 <input type="number">仍然没有得到广泛的支持，你最好还是使用文本输入。预防性地，您可以使用 keypress 禁止任何不是数字的字符。事件和 e.preventDefault() .但是请确保，如果你想支持旧版浏览器 (IE8-)，有一个 number of inconsistencies考虑返回的键码/字符码。如果你还想禁止粘贴非数字内容，你可以使用 paste 来实现。事件和 e.clipboardData.getData('plain/text') (完整的实现见here)

用下面的代码测试:

var myInput = document.getElementsByTagName('input')[0];
myInput.addEventListener('keypress', function(e) {
  var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
  function keyAllowed() {
    var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
                51,52,53,54,55,56,57,91,92,93];
    if (key && keys.indexOf(key) === -1)
      return false;
    else
      return true;
  }
  if (!keyAllowed())
    e.preventDefault();
}, false);

// EDIT: Disallow pasting non-number content
myInput.addEventListener('paste', function(e) {
  var pasteData = e.clipboardData.getData('text/plain');
  if (pasteData.match(/[^0-9]/))
    e.preventDefault();
}, false);

<input type="text">