step="0" 会导致浏览器静默丢弃该属性并回退到默认步长,因模运算无定义使校验失效,正确做法是用 readonly、disabled 或 step="any" 配合 JS 控制。

step="0" 会导致浏览器忽略该属性,退化为默认步长
HTML 规范明确禁止 step 值为 0。所有主流浏览器(Chrome、Firefox、Safari、Edge)遇到 step="0" 时,都会静默丢弃该值,并按默认行为处理:type="number" 回退到 step="1",type="time" 回退到 step="60"(即 1 分钟),type="date" 等则按各自类型默认值处理。
为什么不能设为 0?校验逻辑会直接失效
浏览器内部判断合法值的公式是 (value - min) % step === 0(浮点安全版)。一旦 step 为 0,模运算无定义,整个校验链崩溃。结果就是:
- 表单提交时不再触发
validity.stepMismatch -
input.checkValidity()可能返回true,即使值明显非法 - 上下箭头、
stepUp()/stepDown()仍按默认步长运行,与预期完全脱节
常见误用场景和替代方案
有人想用 step="0" 表达“禁止增减”,这是错误思路。正确做法是:
- 禁用交互:加
readonly或disabled属性 - 限制输入但保留可编辑:用
step="any"+ JavaScript 监听input事件拦截非法变更 - 需要固定值:直接设
value并配合readonly,别依赖step
真正棘手的是那些没报错、也没警告的静默退化——它让你以为控制住了,其实约束早已失效。只要看到 step="0",一律删掉或替换成明确的非零值。
立即学习“前端免费学习笔记(深入)”;



















