输入type ="number"with pattern ="[0-9]*"允许firefox中的字母

Question

所以,所有问题都在主题标题中.输入type="number"与pattern="[0-9]*"在Chrome精品工程,但允许在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">

Answer 1

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

此外，根据MDN，

<input type="number">元素不支持使用模式属性使输入的值符合特定的正则表达式模式。这样做的基本原理是数字输入不能包含除数字之外的任何内容，并且您可以使用 min 和 max 属性限制有效数字的最小和最大数量

所以没有必要使用它。

选择一个数字输入确实有两件事。首先在移动设备上应该调出数字小键盘而不是普通键盘来输入，其次应该只允许数字作为有效输入。因此，如果您想阻止用户将文本输入其中，您将需要 JavaScript。

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

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

Answer 2

您可以Regex用来完全阻止用户在该input字段中输入任何字母。

因此，在您的输入元素上，我将添加以下事件侦听器： 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();
}

我已经测试过了，它应该防止任何非数字输入和任何特殊字符，例如@＃。/？等等...