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

Answer 2

您可以使用带有pattern属性的正则表达式验证值：

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

Answer 3

您可以使用内置的表单验证validity.valid，用户将无法输入或粘贴负值。更多信息here

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

Answer 4

试试这个：

<input type="number" min="0">

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

4 个答案: