Firefox不允许在input [type = number]中输入小数

Question

我在Firefox中遇到了一些奇怪的行为。我有一个简单的input [type = number]字段，当我尝试在其中输入一个十进制值（例如4.5）时，浏览器在我的输入周围放置了难看的红色边框。

<input type="number" />

如何解决此问题并覆盖Firefox的这种愚蠢行为？

见jsFiddle

Answer 1

如果设置step="0.01"，则边框消失。

数字类型具有一个步进值，该步进值控制哪些数字有效（以及最大和最小），默认为1。此值也被实现用于步进按钮（即，按逐步增加按）。

只需将此值更改为适当的值即可。但是，这也意味着用户只能使用小箭头按您的值进行操作。

取自这个答案

Answer 2

参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values 上的“Allowing_decimal_values”部分，

添加该属性step="any"将允许使用小数。

Answer 3

将属性step="any" 添加到输入将删除 Firefox 中的红色边框，并允许在小数分隔符后输入任意数量的数字，同时保持增加/减少按钮将输入值修改为 1 的步骤：

<input type="number" step="any" />

如果用户输入了小数，则增加/减少步骤会将数字四舍五入为整数。例如，如果用户在输入字段中输入值 10.1 并单击增加按钮，则该值将增加到 11。如果用户单击减少按钮，则该值将减少到 10。