输入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">元素不支持使用pattern属性使输入的值符合特定的正则表达式模式。其基本原理是数字输入不能包含除数字之外的任何内容，您可以使用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();
}

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

Answer 3

元素不支持使用pattern属性使输入的值符合特定的正则表达式模式。其基本原理是数字输入不能包含除数字之外的任何内容，您可以使用min和max属性约束有效数字的最小和最大数量，如上所述。

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

您应该使用Javascript代替this link。

Answer 4

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

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

没有空格 -

它将与国家代码“^ [ - +（）] [0-9] [ - +（）0-9] $”一起使用。

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