input type="number" 的 step 属性仅控制箭头/方向键增减逻辑，不限制手动输入；需用 JavaScript 在 change/blur/paste/drop 时校验并四舍五入到步长倍数，注意精度匹配与浮点误差修正，并添加 inputmode="decimal" 和对应 pattern 提升移动端体验。
input type="number" 的 step 属性必须显式设置
不写 step，浏览器默认值是 1，但用户仍可输入任意小数（比如 1.23），这常被误认为“没生效”。真正起作用的是：当点击上下箭头、或按键盘 ↑/↓ 时，数值才按 step 增减；手动输入不受限——这是标准行为，不是 bug。
要强制只允许步长对齐的值，得配合 JavaScript 校验。常见做法是在 change 或 blur 时四舍五入到最近的步长倍数：
<input type="number" id="price" step="0.05" min="0" />
<script>
document.getElementById('price').addEventListener('change', function() {
const step = parseFloat(this.step) || 1;
const val = parseFloat(this.value);
if (!isNaN(val)) {
// 四舍五入到 step 的整数倍
const rounded = Math.round(val / step) * step;
this.value = rounded.toFixed(step.toString().split('.')[1]?.length || 0);
}
});
</script>小数位数错乱？注意 step 和 toFixed 的精度匹配
step="0.05" 意味着合法值应保留两位小数（如 1.00、1.05、1.10），但 toFixed(2) 在某些浮点运算下会出 1.0499999999999998 —— 所以不能只依赖 parseFloat + toFixed。
- 用
Number(val.toFixed(precision))再转一次，消除浮点误差 - precision 应从
step字符串中提取：(step.toString().split('.')[1] || '').length - 若
step="1"，则 precision = 0，toFixed(0)返回整数字符串，再转Number避免末尾 ".0"
移动端数字键盘不显示小数点？加 inputmode 和 pattern
iOS Safari 和部分安卓浏览器在 inputmode="decimal" 下才会默认唤起带小数点的软键盘；仅靠 type="number" 不够稳定。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
同时，pattern 可辅助校验格式（虽然不阻止输入，但结合 reportValidity() 可触发提示）：
<input type="number"
inputmode="decimal"
pattern="\d*\.?\d{0,2}"
step="0.05"
title="请输入 0.05 的整数倍" />注意：pattern 是正则字符串，\d{0,2} 表示最多两位小数，需和 step 的精度一致，否则用户无法输入合法值（如 step="0.001" 却限制两位小数）。
禁用粘贴绕过校验？监听 paste 并规范化
用户复制粘贴 "1.234" 到 step="0.05" 的输入框，不会触发 change，但值已非法。必须拦截 paste 事件：
- 阻止默认行为：
e.preventDefault() - 读取剪贴板文本：
e.clipboardData.getData('text') - 解析为数字 → 对齐步长 → 插入规范化后的值
- 别忘了同时处理
drop（拖放文本）事件，逻辑类似
这个环节最容易被忽略，也是线上表单验证失效的高频原因。
