step属性控制type="number"输入框的合法值序列和原生校验，即仅允许满足(value−min)%step===0的值，影响上下箭头、键盘微调及submit时的stepMismatch验证。
input type="number" 的 step 属性到底控制什么
它不只影响点击上下箭头的增减量，更关键的是——浏览器会用 step 验证用户输入是否合法。比如设 step="0.1"，输入 1.05 会被视为无效（即使 min="0" max="10"），提交时触发 reportValidity() 报错或表单阻断。
常见错误现象：输入框明明填了数字，但 checkValidity() 返回 false，控制台却无报错；或者点击提交没反应，其实是被原生约束拦住了。
实操建议：
-
step必须是能被 1 整除的十进制小数（推荐用字符串写法避免浮点误差），如"0.1"、"1"、"any"（禁用步长校验） - 若允许任意小数（如价格输入），必须显式设
step="any"，不能省略或设为step="0.01"（后者会拒绝1.005） - 整数场景下，
step="1"是安全默认值；设step="2"则只接受偶数（0, 2, 4...）
min/max 和 step 联合生效的边界逻辑
min 和 max 定义的是数学区间，但最终可输入值必须同时满足「落在 [min, max] 内」且「与 min 的差值能被 step 整除」。例如：min="1" max="5" step="2"，合法值只有 1、3、5；而 min="0.5" max="2.5" step="0.7" 合法值是 0.5、1.2、1.9（2.6 > 2.5 被截断）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 设
min="0" step="0.1"时，0.0000001会被认为非法——因为不是0 + n × 0.1的结果 -
max不是“四舍五入上限”，而是硬性截断点；超出即 invalid，不会自动修正 - 移动端 iOS Safari 对
min/max/step的解析更严格，建议在真机测试
如何绕过原生 step 校验又保留数字输入体验
当业务需要自由输入（如支持任意精度的测量值），但又想保有数字键盘（移动端）、上下箭头、防字母粘贴等特性时，不能简单换用 type="text"。
实操方案：
- 保持
type="number"，但设step="any"——这是最轻量解，兼容所有现代浏览器 - 若需进一步控制格式（如限制小数位数），用
input事件监听 + 正则清洗：value = value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')，再配合setSelectionRange修复光标位置 - 禁用原生校验可加
novalidate到 form，但注意这会关闭所有字段校验，不推荐全局使用
JavaScript 动态修改 step/min/max 后的注意事项
直接改 DOM 属性（如 el.step = "0.5"）会立即生效，但已有输入值未必自动重校验。用户可能仍看到红色边框或 validity.stepMismatch === true。
关键动作：
- 修改后调用
el.reportValidity()强制重新校验（会弹原生提示） - 或先
el.value = ""清空，再设新值，避免残留 mismatch 状态 - 注意：Safari 15.4+ 之前存在 bug，动态改
step后上下箭头仍按旧值增减，需手动绑定 click 事件模拟
复杂点在于，step 不是纯 UI 控制器，它是约束协议的一部分；改了就得同步清理状态，否则表单行为会不可预测。
