step属性仅约束用户输入步长且提交时校验，不改变数值精度；浮点误差源于JavaScript的IEEE 754存储机制；需结合整数“分”单位存储、toFixed截断、服务端二次校验等全链路控制。
step 属性对价格输入的实际控制效果
step 本身不改变数值精度，只约束用户能输入或通过上下箭头调整的“合法步长”。比如 <input type="number" step="0.01"> 允许用户输入 1.99、2.00、2.01，但不会自动把 1.234 四舍五入成 1.23 —— 浏览器只是在提交前校验是否符合 step 规则，不符合就标红并阻止表单提交。
为什么直接写 step="0.01" 还是会出精度问题
浮点数在 JavaScript 中无法精确表示十进制小数，0.1 + 0.2 !== 0.3 是经典表现。即使 HTML 写了 step="0.01"，JS 读取 input.valueAsNumber 后做加减，仍可能得到 19.990000000000002 这类值。
- 浏览器内部用 IEEE 754 双精度存储，
0.01本身就是近似值 -
valueAsNumber返回的是 Number 类型，不是高精度 Decimal -
step校验发生在表单提交时，不影响 JS 运行时计算
真正可控价格精度的组合方案
必须配合 JS 处理：输入时截断、计算时转整数、显示时格式化。
- 用
step="0.01"+min="0"+max做基础约束和 UX 提示 - 监听
input或change事件，用parseFloat(value).toFixed(2)截断（注意：toFixed返回字符串，需再转 Number） - 更稳妥的做法是统一用“分”为单位存整数：
1999代表¥19.99，所有加减乘除都在整数层面进行 - 显示给用户时再除以
100并用toLocaleString('zh-CN', { minimumFractionDigits: 2 })格式化
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('input', () => {
const raw = parseFloat(input.value) || 0;
// 转成分，四舍五入取整，避免浮点误差
const cents = Math.round(raw * 100);
// 再转回元，保证两位小数显示
input.value = (cents / 100).toFixed(2);
});移动端和 Safari 的特别注意点
iOS Safari 对 type="number" 的 step 支持不稳定，有时忽略 step="0.01" 直接弹出整数键盘；部分安卓 WebView 也不严格校验。
- 不要依赖
step做唯一精度保障，必须服务端二次校验 - 考虑降级为
type="text"+ 自定义软键盘提示（inputmode="decimal"），再用正则限制格式：/^\d+(\.\d{1,2})?$/ - 服务端收到价格字段后，应强制解析为整数分，拒绝任何非两位小数的输入（如
"19.9"或"19.999"）
精度控制真正的复杂点不在 HTML 层，而在于“输入 → 存储 → 计算 → 显示 → 提交”整条链路上每一步都可能引入浮点误差，任何一个环节松动，前面的 step 就形同虚设。
