必须搭配min、max和value（且value需在min/max/step合法序列内）三项HTML属性，单靠step无防护力；浏览器原生校验仅提交时触发且Safari支持不全，须用JS监听change事件四舍五入修正，并后端二次校验。
step属性在里怎么起作用
step 本身不“限制”数量，它只定义合法输入值之间的间隔。比如 step="5" 表示允许填 0、5、10、15……但用户仍可手动输入 7，浏览器不会阻止——除非你同时加 min、max 和 required，再配合 JS 校验。
常见误解是设了 step="2" 就能防住奇数，实际没用。真正起效需要组合约束 + 提交拦截。
必须搭配的 HTML 属性有哪些
单靠 step 毫无防护力。以下三项缺一不可：
-
min：设定最小合法值（如min="1"） -
max：设定最大合法值（如max="99"） -
value初始值需落在min/max/step构成的合法序列内（例如min="2" step="3"时，value="2"是非法的，得写成value="2"→ 改为value="5"或删掉让默认取min）
为什么用户还能输错？JS 怎么补救
浏览器原生校验只在表单提交时触发，且部分旧版 Safari 对 step 支持不全。所以得加一层 JS：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="number"]');
input.addEventListener('change', () => {
const val = Number(input.value);
const min = Number(input.min);
const step = Number(input.step) || 1;
const offset = (val - min) % step;
if (offset !== 0) {
// 四舍五入到最近合法值（也可 floor 或 ceil）
const nearest = min + Math.round((val - min) / step) * step;
input.value = Math.max(min, Math.min(Number(input.max) || Infinity, nearest));
}
});注意：input.step 默认是 "1" 字符串；input.max 可能为空字符串，需兜底。
移动端和无障碍要注意什么
iOS Safari 的数字键盘不尊重 step，会始终显示完整数字键；屏幕阅读器可能忽略 step 含义。更稳妥的做法是用下拉框（<select></select>）列出所有合法选项，或用按钮组控制增减（+/-），并把最终值存在隐藏 <input type="hidden"> 中提交。
别指望纯 HTML 能堵死所有路径。真实场景中，后端必须重新校验 quantity 是否符合步长规则——这是唯一不可绕过的防线。
