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

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

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

您应该使用Javascript代替this link。

Answer 2

似乎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 3

您可以使用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 4

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

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

没有空格-

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

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

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

4 个答案: