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

前端之家收集整理的这篇文章主要介绍了css – 输入type =“number”with pattern =“[0-9] *”允许firefox中的字母前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

所以,所有问题都在主题标题中.输入类型=“数字”,模式=“[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;
		}
	}
最佳答案
似乎Firefox不会限制您将字母字符输入到数字输入中,但是在提交表单时它仍会验证输入,如下所示.请注意,e和E都在数字输入中有效.

另外,根据MDN,

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.

您将通过下面的示例看到,当您尝试提交表单时,如果输入不是数字,则会提示您更正它,并且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;
}
原文链接:https://www.f2er.com/css/427256.html

猜你在找的CSS相关文章