输入类型为“number”且模式为“[0-9]*”允许在Firefox中输入字母。

Question

所以，问题就在于主题的标题中。在Chrome中使用type="number"和pattern="[0-9]*"的输入正常工作，但在FF中允许字母。有没有不使用jQuery或JS的方法来解决它？

.small-input {
  -moz-appearance: textfield;
}
.small-input::-webkit-inner-spin-button {
   display: none;
  }

.small-input::-webkit-outer-spin-button,
.small-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
  }
 }

<input class="small-input " pattern="[0-9]*" value="" type="number">

- Heidel

Answer 1

您可以使用正则表达式完全防止用户在输入字段中输入任何字母。

所以在您的输入元素上，我会添加以下事件监听器：onkeypress="preventNonNumericalInput(event)"

<input class="small-input " pattern="[0-9]*" value="" type="number" onkeypress="preventNonNumericalInput(event)">

然后在您的JavaScript文件中，您将创建以下函数：

function preventNonNumericalInput(e) {
  e = e || window.event;
  var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
  var charStr = String.fromCharCode(charCode);

  if (!charStr.match(/^[0-9]+$/))
    e.preventDefault();
}

我已经测试过了，它应该可以防止任何非数值输入以及任何特殊字符，例如@#./?等等...

- slee423

---

这不考虑 -、. 和任何其他键。 - Satyam Singh

你测试过这个吗？除非该字段也是“必需的”，否则Firefox不会对其执行任何操作。 - James

这个代码完美运行，唯一需要改变的是使用 event.key，因为其他的已经被弃用了。像这样： !/^\d*$/.test(event.key) - Yftach

Answer 2

似乎Firefox不会限制您在数字输入中输入字母字符，但是在提交表单时仍将验证输入，如下所示。请注意，数字输入中的e和E都是有效的。

此外，根据MDN， 元素不支持使用模式属性使输入值符合特定的正则表达式模式。其理由是数字输入只能包含数字，并且可以使用min和max属性约束最小和最大有效数字数。

因此不需要使用它。

选择数字输入确实有两个作用。首先，在移动设备上，它应该弹出数字键盘而不是普通键盘以输入输入，其次，它应该仅允许数字作为有效输入。因此，如果要防止用户向其中输入文本，则需要JavaScript。

通过下面的示例，您将看到当您尝试提交表单时，如果输入不是数字，则会提示您进行更正，并且模式属性是不必要的：

.small-input {
  -moz-appearance: textfield;
}
.small-input::-webkit-inner-spin-button {
  display: none;
}
.small-input::-webkit-outer-spin-button,
.small-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<form>
  <input class="small-input" value="" type="number">
  <button>Button</button>
</form>

- j08691

---

这并不会阻止 Firefox 中的文本输入，至少在2021年是这样。 - Hade0011

而且也不会在2023年。 - undefined

Answer 3

元素不支持使用模式属性来使输入的值符合特定的正则表达式模式。这样做的原因是数字输入框中不可能包含除数字以外的任何东西，而且您可以使用上面解释过的min和max属性来限制有效数字的最小和最大数量。 链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number 您应该使用JavaScript，可以在此链接中查看相关信息。

- Ignacio Ara

---

输入类型为“number”的元素允许使用“e”符号，因此我添加了模式以避免这种情况。 - Heidel

是的，我知道，因为正如你所知道的那样，e是一个数字。唯一的选择是使用JS。 - Ignacio Ara

Answer 4

如果您对使用非废弃属性（如keyCode）的语法感兴趣：

const handleAllowNumbers = (e) => {
  if (e.target.type === "number" && !e.key.match(/^[0-9]+$/)) {
    e.preventDefault();
  }
};

- Przemo

---

只是一个警告：这也会禁用功能键（STRG+A，箭头键等）。 - elpoto

Answer 5

它将使用国家代码"[0-9]+$"（正则表达式格式）。

注意：上述正则表达式代码允许空格。

没有空格-

它将使用国家代码"^[-+()][0-9][-+()0-9]$"。

注意：上述正则表达式代码不允许空格。

- Ritesh Yadav

Answer 6

适用于Chrome、Firefox和Safari（最新浏览器版本）

<input
  class="form-control"
  min="1"
  type="text"
  maxlength="1000000"
  @keypress="onlyNumber"
 >

和方法

function onlyNumber ($event) {
    let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
    if ((keyCode < 48 || keyCode > 57) && keyCode !== 190) { // 46 is dot
        $event.preventDefault();
    }
},

- VipinKundal