输入type="number“和pattern="[0-9]*”允许在火狐中使用字母

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

​

Answer 1

看起来Firefox并不限制您在数字输入中输入字母字符，但是它仍然会在提交表单时验证输入，如下所示。注意，e和E在数字输入中都是有效的。

另外，根据MDN的说法，

<input type="number">元素不支持使用pattern属性使输入的值符合特定的regex模式。这样做的理由是，数字输入只能包含数字，而且可以使用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>

​

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();
}

我已经测试过这一点，它应该防止任何非数字输入和任何特殊字符，如@#./?等.

Answer 3

元素不支持使用模式属性使输入的值符合特定的regex模式。这样做的理由是，数字输入只能包含数字，您可以使用min和max属性限制有效数字的最小和最大数目，如上面所解释的。

链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

您应该使用Javascript代替，遵循此链接。