step属性仅控制箭头/滚轮增减的最小变化量，不阻止手动输入或自动四舍五入；需配合min/max显式写为小数并用js校验修正 onblur 或 submit 时的值。
step 属性在 <input type="number"> 中的实际行为
它只控制用户通过上下箭头（或滚轮）增减时的最小变化量，不强制限制手动输入值——也就是说，step="5" 不会阻止用户键入 7 或 12，也不会自动四舍五入。
浏览器仅在调用 input.stepUp() 或 input.stepDown() 时严格遵循该值；表单提交或 JS 读取 .value 时，值仍是原始字符串（需转为数字再判断是否合规）。
为什么设置了 step="0.5" 却无法输入小数？
常见原因是同时设了 min 或 max，而它们默认是整数，导致浏览器内部校验失败。例如：<input type="number" min="0" max="10" step="0.5"> 中，min 和 max 被解析为 0.0 和 10.0，但部分浏览器（尤其是旧版 Safari）仍按整数步进逻辑处理。
- 显式写成
min="0.0"、max="10.0" - 确保
step值能被(max - min)整除，否则最后一步可能被截断 - 若允许任意小数，建议用
step="any"，此时浏览器不校验步进，但保留小数输入能力
如何真正约束用户只能输入合法步进值？
靠 HTML 属性本身做不到，必须配合 JS 校验。关键不是阻止输入，而是修正 onBlur 或 submit 时的值：
input.addEventListener('blur', () => {
const val = parseFloat(input.value);
const base = parseFloat(input.getAttribute('min') || '0');
const step = parseFloat(input.getAttribute('step') || '1');
if (!isNaN(val) && !isNaN(base) && !isNaN(step)) {
const offset = (val - base) % step;
const rounded = offset > step / 2 ? val + step - offset : val - offset;
if (Math.abs(rounded - val) > 1e-10) {
input.value = rounded.toFixed(step <p>注意：直接用 <code>Math.round((val - base) / step) * step + base</code> 在浮点运算下容易出错（如 <code>0.1 + 0.2 !== 0.3</code>），所以先转字符串再 <code>toFixed</code> 更稳妥。</p><h3>移动端 iOS 上 <code>step</code> 几乎无效？</h3><p>是的。iOS Safari 的原生数字键盘不响应 <code>step</code>，也不显示小数点按钮（除非 <code>step="any"</code>）。用户只能手动输入，且无法用箭头调节。</p>
- 若需强约束，放弃
type="number"，改用type="text"+ 自定义软键盘（如 mask 库） - 或降级为 range 输入 + 实时显示数值，绕过键盘限制
- 务必在服务端再次校验，因为所有前端控制都可被绕过
真正起作用的永远是后端验证和数据库字段精度定义，HTML 的 step 只是体验层的轻量提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
