HTML number类型输入框min为浮点数时点击上下箭头值跳转异常问题

<input value="2" min="0.1" max="1000" type="number" step="1" />

现象原因 #

原生type="number"输入框的步进计算规则以min属性值为基准，而非当前输入框的value值：

• 合法值的计算逻辑为 min + n * step，其中n为大于等于0的整数
• 结合配置的min=0.1、step=1参数，符合规则的合法值序列为 0.1、1.1、2.1、3.1、4.1...
• 初始设置的value=2不在合法值序列中，浏览器点击向上箭头时会自动取距离当前值最近的更大合法值作为跳转目标，所以第一次点击会从2跳到2.1，之后每次加步长1就会依次跳到3.1、4.1
• 手动将值修改为3后，3同样不在合法值序列中，点击向上箭头依然会优先跳到最近的更大合法值3.1，后续步进逻辑保持一致

修复方案 #

如果要实现从2开始每次加1的步进效果，可选两种调整方式：

• 将min属性调整为整数，比如设置min=0，此时合法值序列为0、1、2、3...，步进逻辑就会符合预期
• 保留min=0.1的前提下，将step属性设置为any，或自行通过JS监听输入事件自定义步进规则

内容的提问来源于stack exchange，提问作者antollika