浏览器用(value-min)%step校验步进对齐，但浮点误差导致异常；Chrome/Safari会静默修正非法value引发交互卡顿；正确做法是显式计算合法值、动态改step后同步重置value、金额场景应换算为整数单位避免精度问题。
value 必须是 min + n × step 的合法结果
浏览器不是拿 value 单独校验，而是用 (value - min) % step === 0 判断是否对齐——但注意这是浮点数运算，直接取余会出错。Chrome、Safari 遇到不合规的 value（比如 min="0"、step="0.1" 却设 value="0.15"），会静默修正为最近合法值（如 0.1 或 0.2），导致 spinner 点不动、滑块拖拽卡顿。
常见错误写法：
-
<input type="number" min="0" step="0.1" value="1.05">→ 浏览器可能悄悄改成 1.0 或 1.1，DOM 中看不出变化 -
<input type="range" min="1" step="0.3" value="1.5">→ 1.5 不在合法序列（1.0, 1.3, 1.6, 1.9…）里，拖动时行为异常
正确做法：显式计算并写死初始值。例如 min="0.5"、step="0.25"，就选 value="1.25"（因为 0.5 + 3 × 0.25 = 1.25）。
动态改 step 后必须重置 value
直接改 input.step = "0.25" 或 input.setAttribute('step', '0.25') 不够——旧 value 很可能已不在新步长序列中。浏览器不会自动重算，用户一拖就跳到边界或卡住。
立即学习“前端免费学习笔记（深入）”；
安全做法是同步重置 value：
- 先读当前值：
const curr = parseFloat(input.value) - 再对齐新步长：
const newStep = 0.25; const aligned = Math.round(curr / newStep) * newStep - 最后写入并格式化小数位（避免
0.7500000000000001）：input.value = aligned.toFixed(2)
注意：用 setAttribute 比直接赋 .step 更稳定，部分旧版 Safari 对后者响应迟钝。
type="number" 的 value 输入不受 step 实时拦截
step 不是输入过滤器。用户仍可手动输入 2.15（当 step="0.1" 时），粘贴任意字符串，甚至用 JS 直接赋值 input.value = "3.7"。这些操作绕过所有原生步进约束。
但后果是后续交互失控：
- 点 ↑ 按钮：从 3.7 跳到 4.7（而非按 0.1 步进到 3.8），因为浏览器仍按
step="0.1"计算，但起点错了 - 表单提交时触发
validity.stepMismatch，报错“值必须为 0.1 的倍数”
所以 JS 设置值前，务必先对齐：input.value = (Math.round(parseFloat(val) / step) * step).toFixed(1)。
金额类场景别碰小数 step
用 step="0.01" 表示分，看似合理，实则埋雷：0.01 在 IEEE 754 中无法精确表示，累加后极易出现 1.9999999999999998 这类值，导致校验失败或显示异常。
真正可靠的做法是换算单位：
-
min="100"、max="9999"、step="1"、value="199"→ 表示 1.99 元 - 显示层用
(value / 100).toFixed(2)格式化，输入层监听input事件，把用户输的 “1.99” 转成整数 199 再存入value
这个思路适用于所有对精度敏感的场景——step 本身不解决浮点问题，它只暴露问题。
