step 属性仅对 type="number" 和 type="range" 有效，浮点精度问题导致 step="0.1" 时 0.3 实际为 0.30000000000000004，触发 stepmismatch；应改用整数单位并配合 js 规整输入。

step 属性只对 type="number" 和 type="range" 生效，其他类型（如 text、tel）写上也完全没反应。

为什么设了 step="0.1" 却输不了 0.3？

这不是浏览器 bug，而是浮点精度问题：0.1 在二进制中无法精确表示，多个累加后实际值可能是 0.30000000000000004，导致表单提交时触发 validity.stepMismatch。常见现象包括：

• 用户手动输入 "0.3" 后点提交，提示“值不符合要求”
• Chrome 控制台显示 ValidityState.stepMismatch === true
• 滑块拖到看似 0.3 的位置，但 input.value 返回的是近似字符串

稳妥做法是改用整数单位：比如金额场景，用分代替元 —— min="0" max="10000" step="1"，再在 JS 中除以 100 显示为元。

min、max 和 step 必须能构成等差数列

合法值必须满足 min + n × step ≤ max（n 为 ≥0 整数），浏览器不会自动补全或修正逻辑断点。典型陷阱：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• min="1" max="10" step="2" → 合法值是 1, 3, 5, 7, 9，10 不合法（因为 (10 - 1) % 2 !== 0）
• min="0.15" step="0.2" → 第一个合法值是 0.15，下一个是 0.35，中间 0.25 永远不可达
• 初始 value="0.15" 配 step="0.1" → Chrome 可能静默改为 "0.1" 或 "0.2"，造成 spinner 卡死

调试时可打印：Array.from({length: 10}, (_, i) => min + i * step) 看真实刻度点。

需要实时拦截非法输入？只能靠 JavaScript

原生 step 不拦截粘贴、键盘输入或拖动过程中的非法值，只在提交或调用 checkValidity() 时校验。要真正控制输入流，必须监听 input 事件并主动规整：

• 读取 parseFloat(e.target.value)，别直接用 e.target.value 字符串
• 用 Math.round(val / step) * step 对齐（注意负数需用 Math.floor 或 Math.ceil）
• 赋值前做 toFixed(n) 防止小数位溢出（如 step="0.01" 就用 .toFixed(2)）
• 动态修改 step 后，必须同步重算并设置 value，否则 spinner 和拖动会失灵

最常被忽略的一点：移动端 iOS Safari 的数字键盘可能不显示小数点，step="0.1" 下用户根本输不了小数 —— 这时候 step="any" + JS 校验反而是更实际的选择。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！