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

Question

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

<input type="number" />

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

见 jsFiddle

Answer 1

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

数字

类型具有一个步长值，用于控制哪些数字有效（以及 max 和 min），默认为 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。