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" 更是直接跳过所有角、分单位。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• step="0.01" 是唯一能覆盖「元+角+分」所有合法组合的值
• 但若同时设了 step="0.01" 却没限制 value 小数位数，用户仍可手动输入 100.123 —— 浏览器不会自动截断或报错
• 某些旧版 Safari 对 step="0.01" 支持不稳定，可能四舍五入为 0.009999999999999998，引发计算偏差

如何让金额输入框真正“只接受两位小数”

仅靠 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"，也别默认用户输的就是合规金额。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！