step属性控制数字输入框最小变化单位，但不阻止非法输入，仅在表单提交时触发stepmismatch校验；需配合min/max定义合法值集合，浮点精度问题（如step="0.1"）易致校验失败。
step属性在中怎么起作用
step 控制数字输入框中允许的最小变化单位，但它不是“限制输入范围”的开关，而是配合 min、max 定义合法值集合。浏览器会用它校验用户输入（包括手动键入、上下箭头、拖动），但**不阻止非法输入，只在表单提交时触发验证失败**。
常见错误是以为设了 step="0.5" 就能禁止输 1.2 —— 实际上用户仍可输入，提交时才报错（ValidityState.stepMismatch === true）。
-
step默认值是1；设为"any"表示不限制步长（允许任意精度） - 当
min未设置时，起点默认是 0，所以step="0.5"允许的值其实是0, 0.5, 1.0, 1.5...，而不是从用户输入的第一个数开始推算 - 浮点精度问题要注意：比如
step="0.1"在二进制下无法精确表示，可能导致看似合法的0.3被判定为stepMismatch
为什么type="range"的step看起来没效果
<input type="range"> 的 step 确实生效，但它的行为和 number 不同：它只控制滑块的“可停靠位置”，不参与表单验证（range 输入永远通过验证）。用户拖动时，值会自动对齐到最近的 min + n × step 点。
容易踩的坑是忘记配 min 和 max —— 如果只写 step="10"，min 默认是 0，max 默认是 100，结果滑块只能取 0, 10, 20...100，超出预期。
- 想让滑块支持小数？写
step="0.1"，但注意显示精度：用valueAsNumber.toFixed(1)取值，别直接拼接字符串 - 移动端 iOS Safari 对
step支持稳定，但部分 Android WebView 会忽略step直接允许任意值滑动（需 JS 补偿校验）
step="any"和省略step的区别
两者表面相似，但语义和行为不同：step="any" 明确告诉浏览器“接受任意精度数值”，而完全不写 step 属性时，浏览器按默认规则处理（number 默认 step=1，range 默认 step=1）。
关键影响在表单验证逻辑：省略 step 时，浏览器会用默认值做 stepMismatch 检查；设成 "any" 则跳过该检查。
- 需要用户输入带小数的价格？用
<input type="number" step="any">，否则99.99在step未设时会被拦住 - 不要混用
step="any"和pattern：正则匹配的是字符串，而step="any"下valueAsNumber可能为NaN（比如输入"12.34.56"） - 服务端永远要二次校验：前端
step是体验层，不能替代后端数值范围与精度检查
用JavaScript手动校验step是否靠谱
浏览器原生 step 验证只在提交或调用 checkValidity() 时触发，没法实时拦截。如果需要输入过程中就限制（比如禁止键入非步长倍数的字符），必须用 JS 拦截 input 或 keydown 事件。
但直接监听 input 做四舍五入或截断，容易破坏用户体验（比如用户刚输 1. 就被强制变成 1）。更稳妥的做法是：延迟校验 + 友好提示。
- 监听
blur事件，用Math.round((value - min) / step) * step + min对齐值，再赋回value - 避免在
keydown中阻止小数点或负号：先让输入发生，再在input里判断是否符合步长逻辑 - 注意
valueAsNumber在非法输入时返回NaN，需先用parseFloat(value)做容错
复杂场景下，step 只是辅助手段，真正可控的还是自己写校验逻辑——尤其是涉及货币、时间间隔、自定义单位时，原生属性覆盖不了所有业务规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
