如何防止用户在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-),请确保在返回的密钥代码/字符代码时要考虑许多不一致之处.如果您还想禁止粘贴非数字内容,您可以使用该paste事件进行操作e.clipboardData.getData('plain/text')(有关完整实现,请参阅此处)

使用以下代码进行测试:

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">

Answer 2

您可以使用pattern属性使用正则表达式验证值:

<input type="number" pattern="^[1-9]\d*$" name="qty">

Answer 3

您可以使用内置的表单验证validity.valid，用户将无法输入或粘贴负值。用户也将无法输入小数。更多信息请点击此处

<input type="number" min="1" oninput="validity.valid||(value='');"/>