输入类型＝“数字”。模式为“ [0-9] *”允许Firefox中的字母 [英] Input type="number" with pattern="[0-9]*" allows letters in firefox

问题描述

因此，所有问题都在主题标题中。输入 type = number 和 pattern = [0-9] * 在Chrome中工作正常，但允许FF中的字母。有没有不用jQuery或JS来解决它的方法？

So, all question is in the topic's title. Input type="number" with pattern="[0-9]*" works fine in Chrome, but allows letters in FF. Is there any way to fix it without using jQuery or 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">

推荐答案

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

Seems that Firefox doesn't restrict you from entering alphabetic characters into a number input, however it still will validate the input upon submitting your form as seen below. Note that both e and E are valid in numeric inputs.

此外，根据 MDN ，

< input type = number> 元素不支持使用模式
属性的作用是使输入的值符合特定的正则表达式
模式。这样做的理由是，数字输入不能包含
，除了数字以外，您可以使用min和max属性来限制有效数字的最小和最大
数。

<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes

所以不需要使用它。

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

Selecting a numeric input really does two things. First on mobile devices is should bring up a numeric keypad instead of a normal keyboard to enter input, second it should only allow numbers as valid input. So if you want to prevent a user from entering text into one, you'll need JavaScript.

您会在下面的示例中看到，当您尝试提交形式，如果输入不是数字，它将提示您进行更正，并且pattern属性是不必要的：

You'll see by the example below that when you try and submit the form, if the input isn't numeric it will prompt you to correct it, and the pattern attribute is unnecesary:

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

这篇关于输入类型＝“数字”。模式为“ [0-9] *”允许Firefox中的字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！