step 属性仅对 input type="number" 等特定类型生效，需配合 min、max 使用才能约束合法值范围，并须用 JavaScript 校验手动输入的非步长值以确保精度。
step 属性对 input type="number" 才生效
很多人试了 input type="text" 或 input type="range" 加 step，发现没用——这是正常的。step 只在 type="number"（以及 date、time 等部分类型）下参与数值校验和步进控制。折扣输入通常要限制为 0.01～1.00 之间的两位小数，type="number" 是最直接的选择。
注意：step 不会自动格式化输入，也不会阻止用户手动输入不符合步长的值（比如输 0.123），它只影响：① 点击上下箭头时的增量；② 表单提交前的原生验证（若设了 required）。
设置 step="0.01" 配合 min 和 max
折扣常见范围是 0%～100%，即数值 0.00～1.00。要让每次增减都是 0.01（1%），必须显式指定 min、max 和 step，三者缺一不可：
<input type="number"
min="0"
max="1"
step="0.01"
value="0.95">-
min="0"和max="1"必须是数字字符串（不带单位），不能写"0.00"或"100%" -
step="0.01"决定了合法值集合：0.00、0.01、0.02…1.00；浏览器会在提交时拒绝0.015这类值（报Value is not a valid number） - 如果省略
min或max，step仍生效，但合法范围会变成无限，失去业务约束
用户手动输入非步长值时的处理逻辑
用户仍可输入 0.123 或粘贴 0.4567，此时：step 不会自动截断或四舍五入；表单提交时，Chrome/Firefox 会触发 invalid 事件并高亮输入框；Safari 表现不一致，可能静默接受。
立即学习“前端免费学习笔记（深入）”；
所以仅靠 step 不够，需补充 JS 校验：
const discountInput = document.querySelector('input[type="number"]');
discountInput.addEventListener('change', () => {
const val = parseFloat(discountInput.value);
if (val && !Number.isInteger(val * 100)) {
// 强制修正为最近的合法值（向下取整到分位）
discountInput.value = (Math.floor(val * 100) / 100).toFixed(2);
}
});- 别用
input事件监听实时修正——会导致光标跳脱、输入体验差 -
change事件更稳妥，等用户失焦或回车后再处理 -
toFixed(2)确保显示两位小数（如0.5→"0.50"），避免0.5被误认为无效
移动端软键盘兼容性问题
Android Chrome 和 iOS Safari 对 type="number" 的软键盘支持差异大：iOS 默认弹出数字键盘但不带小数点；部分 Android 厂商键盘甚至不显示小数点键。
- 加
inputmode="decimal"可提升 iOS 小数点可见性（但非所有版本支持） - 不要依赖软键盘布局做输入控制，始终以 JS 校验为准
- 若业务强要求友好输入体验，建议改用
type="text"+ 正则限制 + 自定义增减按钮，放弃原生step
真正起作用的是 step + min + max 三者组合，且必须配合 JS 处理边界情况；纯 HTML 层面无法解决所有输入异常。
