step仅对type="number"和"type=range"生效，须配合min/max才有业务意义；浮点精度问题易致校验失败，推荐用整数单位替代小数。
step 属性不是“输入限制开关”，它只定义合法值的数学序列，且仅对 type="number" 和 type="range" 生效；不配 min 和 max，step 就失去业务意义；浮点精度问题会让 step="0.1" 在提交时意外报错。
step 只在 number 和 range 类型中起作用
给 type="text"、type="email" 或 type="tel" 加 step 属性完全无效——浏览器既不解析，也不报错，就像没写一样。这是最常被误用的点。
-
type="number"：step 控制上下箭头增减量、表单提交校验（触发ValidityState.stepMismatch）、以及合法值集合（min + n × step） -
type="range"：step 决定滑块可停靠的离散位置，但不参与表单验证（range输入永远通过原生校验） -
type="date"等时间类型也支持 step，但语义不同（如step="7"表示按周跳转），日常较少用
必须和 min/max 一起用才有实际约束力
单独写 step="0.01" 没有意义：合法值会从默认起点 0 开始，无限延伸到正无穷，根本无法匹配“折扣 0～1”或“价格 0～9999”这类业务范围。
- 正确写法：
<input type="number" min="0" max="1" step="0.01">→ 合法值是 0.00、0.01、0.02…1.00 - 错误写法：
<input type="number" step="0.01">→ 合法值是 0、0.01、0.02…∞，用户输 999999 也能通过校验 - 注意：
min和max必须是数字字符串（如"0"），不能写"0.00"或"100%"，否则部分浏览器可能忽略
浮点精度会让 step="0.1" 在某些场景失效
JavaScript 用二进制存储十进制小数，0.1 + 0.2 !== 0.3 是常识；同样，浏览器内部生成合法值序列时也会产生类似误差，比如 min="0" step="0.1" 理论上应含 0.3，但实际可能存为 "0.30000000000000004"，导致用户手动输入 "0.3" 被判为非法。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：用整数单位替代小数，例如金额用“分”代替“元”：
min="0" max="10000" step="1"，JS 中再除以 100 显示 - 若必须用小数，避免
step小于 0.01（旧版 Safari 支持差），优先选能被 2 的幂整除的值，如step="0.125" - 校验时别用
(value - min) % step === 0，改用容差判断：Math.abs(((value - min) / step) % 1)
用户仍可输入非法值，JS 校验不可省略
step 不拦截键盘输入、粘贴或拖动过程中的中间值；它只在失焦或表单提交时触发校验。用户输 "0.123"、粘贴 "2.4567" 都不会被阻止，Chrome/Firefox 会在提交时报 stepMismatch，Safari 可能静默接受。
- 推荐监听
change事件做修正（比input更稳，避免光标跳脱）： const input = document.querySelector('input[type="number"]');<br>input.addEventListener('change', () => {<br> const val = parseFloat(input.value);<br> if (!isNaN(val)) {<br> const step = parseFloat(input.step) || 1;<br> const min = parseFloat(input.min) || 0;<br> const rounded = Math.round((val - min) / step) * step + min;<br> input.value = rounded.toFixed(step.toString().split('.')[1]?.length || 0);<br> }<br>});- 表单提交前务必调用
checkValidity()，并用setCustomValidity()提供明确提示，别依赖原生红框
真正容易被忽略的是：step 定义的合法值序列是否真能覆盖你的业务边界。比如 min="1" max="10" step="2"，最大合法值是 9，不是 10——因为 1 + 2×n = 10 无整数解。上线前最好用 JS 打印一下真实刻度点，别只靠肉眼估算。
