浏览器会静默修正不满足 min + n × step 的 value 为最近合法值，导致 spinner 失灵、滑块跳变、checkValidity() 返回 false；需初始化对齐、用 stepUp/stepDown、JS 实时校验三层兜底。
value 不满足 min + n × step 就会静默修正
浏览器不会报错，但会悄悄把 value 改成离它最近的合法值（比如 min="0"、step="0.1" 却设 value="1.05"，Chrome 可能直接变成 "1.0" 或 "1.1"）。结果是 spinner 按不动、滑块拖到一半跳变、checkValidity() 返回 false。
必须确保初始 value 严格落在序列里：
-
min、step、value全部用相同小数位数写，例如min="0.00"、step="0.01"、value="1.99" - 若
min="1"且step="0.25"，合法值只有1.00、1.25、1.50… 别设value="1.1" - 动态改
step后，立刻重算并重置value：input.value = (Math.round(parseFloat(input.value) / newStep) * newStep).toFixed(2)
step="0.1" 点两次 ↑ 变成 0.30000000000000004 怎么办
这不是 step 的问题，是 JavaScript 浮点运算底层限制：0.1 在二进制中无法精确表示。所有基于 parseFloat(val) + 0.1 的手动计算都会出错。
正确做法是绕过 JS 浮点计算：
立即学习“前端免费学习笔记（深入）”；
- 优先用原生方法：
input.stepUp(1)和input.stepDown(1)，它们按step字符串值解析执行，不走浮点加法 - 金额类场景彻底换单位：用“分”代替“元”，
min="100"、step="1"、value="199" - 显示时再格式化：
parseFloat(input.value).toFixed(2)，别让界面暴露0.30000000000000004
粘贴、拖拽、第三方输入法绕过 step 校验
step 只约束浏览器内置行为（上下箭头、stepUp、滑块拖动对齐），对粘贴、手输、移动端键盘输入完全无感。用户粘贴 "2.15" 进 step="0.1" 的框，提交前才报错。
必须用 JS 主动兜底：
- 监听
input事件，实时截断：input.value = parseFloat(input.value).toFixed(1) - 提交前校验：
const diff = Math.abs(((parseFloat(input.value) - parseFloat(input.min)) / parseFloat(input.step)) % 1); if (diff > 1e-10) { /* 非法 */ } - 别依赖
validity.stepMismatch做唯一判断——它只在提交或调用checkValidity()时触发
动态改 step 后 spinner 失灵或跳变异常
直接赋值 input.step = "0.25" 不可靠，浏览器不会自动重算合法值集合。旧 value 很可能已越界，导致交互卡死。
安全操作顺序必须是：
- 用
input.setAttribute('step', '0.25')更新属性（比直接赋值兼容性更好） - 立刻重置
value到新步长下的合法值，例如：input.value = Math.round(parseFloat(input.value) / 0.25) * 0.25 - 加
requestAnimationFrame延迟重置，避免快速切换时状态残留 - 最后调用
input.checkValidity()，必要时input.reportValidity()主动提示
复杂点在于：step 不是开关，是数学约束；而用户所有自由输入路径——粘贴、拖动、语音输入——都天然绕过它。真正要稳，得靠初始化对齐 + 原生方法调用 + JS 实时校验三层配合。
