checkValidity() 可主动触发 step 校验，但需手动调用；最可靠方式是读取 input.validity.stepMismatch，注意浮点误差、min/value 对齐及 type 限制。
用 checkValidity() 主动触发 step 校验
浏览器不会等你点提交才检查 step 合法性，但也不会实时高亮——得手动调用校验 API 才能确认当前值是否落在 min + n × step 序列里。直接读 input.validity.stepMismatch 最可靠，比肉眼观察输入框有没有红边更准。
常见误判场景：
- 输入
"1.25"，min="0"step="0.01"→validity.stepMismatch === false（合法） - 输入
"0.3"，min="0"step="0.1"→validity.stepMismatch === true（浮点误差导致模运算失败） -
value="2.5"但min="1"step="2"→ 合法值应为1, 3, 5...，所以2.5必然触发stepMismatch
监听 input 事件看步进器真实行为
别只信箭头点击后的最终值，input 事件能捕获每次微调的中间状态。比如 min="0" step="0.25"，点一次上箭头，事件里拿到的 e.target.value 应该是 "0.25"，而不是 "0.24999999999999997"——如果出现后者，说明浏览器没对齐步进格点，得查初始 value 是否合规。
实操建议：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 初始化时显式设
value="0"或value="0.25"，别留空或设"0.1" - 在事件回调里用
parseFloat(e.target.value)而非直接拼接字符串 - 加个
console.log({ value: e.target.value, stepMismatch: e.target.validity.stepMismatch })，拖两下就清楚问题出在校验还是渲染
用 DevTools 检查 validity 对象和 computed 值
右键输入框 → “检查”，在 Elements 面板选中该 input，然后在 Console 里输 $0.validity，立刻看到所有校验状态。重点盯 stepMismatch 和 valid 字段。再输 getComputedStyle($0)，确认 appearance 是 auto 还是被 CSS 强制改成了 none——后者会让箭头消失，step 形同虚设。
容易被忽略的细节：
-
type必须是"number"或"range"，否则validity.stepMismatch永远是undefined -
min缺失时，浏览器以0为起点算序列，但部分旧版 Firefox 会 fallback 到-Infinity，导致校验失效 - 移动端 Safari 有时不触发
input事件，得补监听change作为降级
构造最小可复现 HTML 页面快速验证
写个只有 5 行的 HTML，比在复杂项目里调试快十倍：
<input type="number" id="test" min="0" max="10" step="0.5" value="0"> <button onclick="console.log(test.checkValidity(), test.validity)">校验</button> <button onclick="test.stepUp(1)">+</button> <button onclick="test.stepDown(1)">-</button>
这样四件事一气呵成：看默认值是否合规、点按钮是否跳步、手动输值是否被拦、点校验按钮立刻反馈。比反复改 React state 或 Vue data 更直接。
真正卡住人的往往不是 step 本身，而是 min 和初始 value 没对齐——哪怕只差 0.000000000000001，浏览器也可能静默修正或拒绝响应。
