HTML5中type="number"配合step属性可限制输入为指定步长的数值，适用于按箱/托/件整数倍或0.5千克等小数倍数的批发采购场景，需结合min、max、required及服务端校验确保有效性。
在 HTML5 中，用 type="number" 配合 step 属性，可以限制用户只能输入指定步长（即特定倍数）的数值，非常适合批发采购场景中“必须按箱/托/件整数倍下单”的需求。
基础写法：设定最小单位和步长
例如，商品按“每箱 12 件”批发，客户只能输入 12、24、36……这类数量：
<input type="number" min="12" step="12" value="12">这里：
- min="12" 表示最少买一箱；
- step="12" 表示每次增减都以 12 为单位；
- 浏览器会自动校验输入值是否满足 value % step === 0（且 ≥ min）。
配合 max 和 value 确保合理范围
批发常有起订量和上限要求。比如：单次采购限 12～240 件，且必须是 12 的倍数：
此时有效输入为：12, 24, 36, ..., 240。
若用户手动输入 25 或粘贴 100，提交时浏览器会提示“请输入有效值”，并阻止表单提交（需配合 required 或 JS 进一步增强体验）。
处理小数倍数（如按 0.5 千克计重采购）
批发也可能是重量或体积单位，例如按“0.5 千克”起批：
立即学习“前端免费学习笔记（深入）”；
<input type="number" min="0.5" step="0.5" value="0.5">支持输入：0.5, 1.0, 1.5, 2.0……
注意：不要写 step="0.5" 却用整数 min="1"，否则 1 是合法的（1 ÷ 0.5 = 2，整除），但 1.5 也合法；只要确保 min 本身是 step 的整数倍即可。
增强兼容性与用户体验的小建议
- 加上
required防止空提交； - 用
title提示规则，如title="请按每箱12件输入数量"； - 服务端必须二次校验——前端限制可被绕过；
- 移动端 iOS Safari 对
step支持良好，但部分安卓键盘可能不显示增减按钮，可辅以自定义加减按钮提升操作效率。
