step属性仅对number、range和部分日期类型输入框生效，对text等类型无效；它只控制箭头增减步长、stepUp/Down方法及提交校验，不阻止手动输入非法值，安全校验必须由后端实现。
step属性只对特定表单控件生效
step 属性不是万能的“跳格输入”开关，它只在 <input type="number">、<input type="range"> 和部分日期类型（如 datetime-local）中起作用。对 text、email、search 等类型设置 step 完全无效——浏览器会忽略它，也不会报错。
常见误解是想用 step="2" 让文本框每次按键都跳过一个字符，或让数字输入框“只允许偶数”，但后者其实需要配合 min 和初始值才能真正约束可选范围。
number类型中step的实际行为和坑点
当 <input type="number" step="5" min="0"> 时，用户仍可手动输入 3 或 7，step 不会阻止非法值输入，只影响：
- 点击上下箭头时的增量/减量步长
- 使用
input.stepUp()/input.stepDown()方法的行为 - 表单提交前浏览器内置校验（若值不满足
min + n × step，会触发validity.stepMismatch）
容易踩的坑：
- step="any" 允许任意精度小数，但若同时设了 min="0" max="1"，仍可能因浮点误差导致 validity.stepMismatch
- step="0.1" 在 JavaScript 中无法精确表示，推荐改用整数缩放（如 step="1" value="123" 表示 12.3，再用 JS 转换显示）
- 某些安卓 WebView 对 step 解析不一致，建议始终配 min 和 value
真要实现“跳格输入”得靠 JavaScript
如果目标是类似“金额输入自动千分位”“时间输入自动跳格（hh:mm:ss）”或“身份证号每4位加空格”，step 完全不适用，必须监听 input 或 keydown 事件手动控制光标和值。
例如限制只能输入两位数字并自动跳到下一个字段：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('input.digit').forEach((el, i) => {
el.addEventListener('input', () => {
if (el.value.length === 2 && el.nextElementSibling) {
el.nextElementSibling.focus();
el.nextElementSibling.select();
}
});
});注意点：
- 直接修改 el.value 会重置光标位置，需用 setSelectionRange 手动恢复
- 移动端软键盘可能因 focus 切换闪退，建议加 setTimeout(..., 0) 延迟聚焦
- 不要仅依赖 maxlength，它不阻止粘贴超长内容
浏览器兼容性和校验绕过风险
step 的校验逻辑由浏览器实现，但用户可通过开发者工具直接修改 DOM 绕过所有前端限制。真实业务中：
- 后端必须重新校验数值是否符合 min/max/step 规则
- step="1" 并不等于“只接受整数”，因为 1.0000000000000002 仍可能通过前端校验
- Safari 对 step="any" 的处理比 Chrome 更宽松，可能导致同一份 HTML 在不同浏览器中校验结果不一致
最常被忽略的是：很多人以为设了 step 就完成了输入约束，其实它只是辅助体验的提示性属性，不是安全边界。
