step 属性仅控制上下箭头微调的最小增量，不校验或格式化输入值；金额应设 step="0.01" 并配合 JS 失焦修正和后端校验，才能确保两位小数精度。
step 属性对 <input type="number"> 金额输入的实际效果
设置 step 并不能让浏览器自动格式化金额（比如加千分位、补零），它只控制用户用上下箭头或键盘微调时的最小增量。对金额来说，step="0.01" 是常见选择，但必须配合 min、max 和小数位数约束，否则会出现 12.345 这类非法值。
关键点在于：step 不校验输入内容，只影响交互增量；真正限制精度得靠 JS 或表单提交前校验。
为什么 step="0.1" 或 step="1" 在金额场景下容易出错
金额通常要求精确到分（即两位小数），用 step="0.1" 会导致用户无法通过箭头输入 19.99（因为 0.1 的倍数永远不等于 0.99）；用 step="1" 更是直接跳过所有角、分单位。
-
step="0.01"是唯一能覆盖「元+角+分」所有合法组合的值 - 但若同时设了
step="0.01"却没限制value小数位数，用户仍可手动输入100.123—— 浏览器不会自动截断或报错 - 某些旧版 Safari 对
step="0.01"支持不稳定，可能四舍五入为0.009999999999999998，引发计算偏差
如何让金额输入框真正“只接受两位小数”
仅靠 HTML 属性做不到，必须组合使用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- HTML 层：设
type="number"、step="0.01"、min="0"，并添加oninput="this.value = parseFloat(this.value).toFixed(2)"强制格式化（注意：这会把空输入转成"0.00"，需额外判断） - 更稳妥做法是监听
blur事件，在失焦时修正：input.addEventListener('blur', () => {<br> const val = parseFloat(input.value);<br> if (!isNaN(val)) input.value = val.toFixed(2);<br>}); - 服务端永远要二次校验，因为前端限制可被绕过
替代方案：用 type="text" + 正则 + 输入限制（更可控）
当需要支持粘贴、兼容性要求高或要防止 0.001 类输入时，放弃 type="number" 反而更可靠：
- 用
inputmode="decimal"呼出数字键盘（移动端友好） - 监听
input事件，用正则/^\d+(\.\d{0,2})?$/实时过滤非法字符 - 避免用
pattern属性做校验——它只在提交时触发，且不阻止输入 - 注意：不要用
maxlength控制位数，因为1234567.89是 10 个字符，但1.99只有 4 个，固定长度不适用
金额输入的复杂性不在 step，而在小数精度、用户输入自由度、浏览器兼容性和后端信任边界之间找平衡。哪怕写了 step="0.01"，也别默认用户输的就是合规金额。
