step属性仅控制输入框的增量步长，无法限制业务逻辑范围，需配合min/max、JS实时修正及后端校验才能确保值合法。
step 属性在 <input type="number"> 中控制数值的增量步长，但它**不能直接限制“满减额度”的业务逻辑范围**，比如“只能填 50、100、150、200”这种离散档位——它只管输入时的键盘/箭头微调行为，不校验最终值是否合法，也不阻止用户手动输入非法值（如 73）。
为什么 step 单独用不管用
浏览器对 step 的实现是松散的：
- 用户仍可手动输入任意数字，step 不触发校验
- 表单提交时，step 不参与 checkValidity()（除非同时设了 min/max 且值越界）
- 某些浏览器（如 Safari）甚至忽略 step 对非整数的约束（如 step="0.01"）
- 它无法表达“仅允许 50 的整数倍且 ≤500”这类复合条件
真正起作用的组合写法
必须配合其他属性 + JS 校验才能落地：
-
min="50"和max="500"：划定基础区间 -
step="50"：让上下箭头和键盘方向键只跳 50 的倍数 -
oninput="this.value = Math.round(this.value / 50) * 50"：实时修正手动输入值（四舍五入到最近 50 倍数） -
onblur="if (this.value % 50 !== 0) this.value = Math.floor(this.value / 50) * 50"：失焦时向下取整到档位（避免用户输 73 后留着）
示例：
<input type="number" min="50" max="500" step="50" oninput="this.value = Math.round(this.value / 50) * 50" onblur="if (this.value % 50 !== 0) this.value = Math.floor(this.value / 50) * 50" placeholder="请输入满减金额（50元起，50元整数倍）">
更健壮的方案：用 <select> 替代输入框
如果档位固定（如 50/100/150/200/300/500），<select> 是零容错选择：
立即学习“前端免费学习笔记（深入）”；
<select name="discount_threshold"> <option value="" disabled selected>请选择满减门槛</option> <option value="50">满50减</option> <option value="100">满100减</option> <option value="150">满150减</option> <option value="200">满200减</option> <option value="300">满300减</option> <option value="500">满500减</option> </select>
优势：无非法输入可能、无障碍友好、移动端体验稳定；缺点：灵活性差，不适合动态档位。
实际项目里，step 只是辅助交互的“糖”，真要保业务规则，得靠 min/max + JS 实时归一化 + 后端兜底校验。别指望一个属性扛下所有逻辑。
