step属性仅控制鼠标滚轮或上下箭头的增量，不影响手动输入、JS赋值或键盘输入；设step="0.5"时点↑从1变1.5，但可直接输入1.234且不被拦截或四舍五入。
step属性在里到底控制什么
它只影响用户用鼠标滚轮或点击上下箭头时的增量，不约束手动输入、JavaScript赋值或键盘输入的值。比如设step="0.5"，用户点一次↑按钮，值从1变成1.5；但直接键入1.234依然能提交——浏览器不会拦截或四舍五入。
为什么给游戏数值用step=1反而可能出问题
很多游戏UI需要整数步进（如技能等级、物品数量），但若同时设了min="0"和step="1"，部分旧版Chrome会把空输入默认解析为0，而Safari可能报RangeError: The input is not a valid number。更稳妥的做法是显式初始化：value="0"，并配合min="0" max="99"。
- 避免留空：始终带
value属性，哪怕只是value="1" - 整数场景优先用
step="1"而非step="any"，后者会失去步进约束 - 如果允许小数（如伤害倍率调整），用
step="0.1"并注意value初始值必须匹配步长（比如value="1.0"而不是value="1"）
step和JavaScript联动时的常见陷阱
直接改input.value不会触发step校验，但用户后续点箭头时会基于当前值继续步进。例如：input.step = "2"; input.value = "3";，再点↑就跳到5，不是4。
- 动态修改
step后，建议同步重置value为合法起点（如Math.floor(value / step) * step） - 监听
input事件时，别依赖event.target.valueAsNumber做逻辑判断——它返回的是解析后浮点数，精度可能丢失（如0.1 + 0.2） - 需要严格整数校验？用
Math.round(parseFloat(input.value))代替直接取valueAsNumber
移动端iOS Safari对step的支持很弱
iOS原生键盘弹出数字键盘时，完全忽略step，上下箭头也不显示。用户只能手动输入，且无任何步进提示。这时候得靠JS补足：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('change', () => {
const val = parseFloat(input.value);
const step = parseFloat(input.step) || 1;
const rounded = Math.round(val / step) * step;
if (rounded !== val) {
input.value = rounded;
}
});
注意：这个逻辑要放在change而非input事件里，否则频繁触发影响体验；也别忘了配合min/max做边界截断。
真正难的不是写对step，而是记住它只管“交互增量”，不负责“数据合法性”。游戏里数值越界、负数、非数字输入，都得自己兜底。
