css - 输入类型 ="number"模式 ="[0-9]*"允许 firefox 中的字母

Question

所以，所有问题都在主题的标题中。使用 pattern="[0-9]*" 输入 type="number" 在 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

您可以使用 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();
}

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