HTML 的 type="number" 输入框默认 step="1"，导致带小数的初始值无法手动删除小数部分并提交；需显式设置 step 为支持小数的值（如 step="0.0001"），才能合法输入/编辑任意精度的小数。
html 的 `type="number"` 输入框默认 `step="1"`，导致带小数的初始值无法手动删除小数部分并提交；需显式设置 `step` 为支持小数的值（如 `step="0.0001"`），才能合法输入/编辑任意精度的小数。
在使用 时，一个常见却易被忽视的问题是：当字段预设了含小数的值（如 value="123.2423"），用户手动删去小数点及后续数字、仅保留整数（如改为 "123"）后点击提交，Chrome 等浏览器会触发表单验证失败（ValidityState.badInput === true），提示“请输入有效值”，甚至阻止提交。这不是浏览器 Bug，而是 HTML 规范中 step 属性行为的严格体现。
根据 MDN 文档， 的默认 step 值为 1，这意味着它仅允许以 1 为步长的数值——即只接受整数。即使你输入或设置了小数（如 123.2423），只要 step 未明确适配该精度，浏览器就会在验证阶段拒绝“看似合法但步长不匹配”的值。例如：123.2423 除以 step="1" 余数非零，因此该值本身在默认规则下已是“无效”状态；而当你删成 123，虽为整数，但因初始值含小数且 step 未放宽，浏览器仍可能因内部状态不一致而报错。
✅ 正确解法是显式设置与业务需求匹配的 step 值：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若需支持最多 4 位小数（如金额、测量值），使用 step="0.0001"；
- 若需任意精度小数（如科学计算），可设 step="any"（兼容性良好，Chrome/Firefox/Edge 均支持）；
- 避免依赖 step="1" 并期望小数“偶尔可用”——这违背语义，必然引发验证冲突。
⚠️ 注意事项：
- step="any" 允许用户输入任意小数，但不替代后端校验；务必在服务端再次验证数值范围与精度；
- 不要混用 step="1" 与小数 value，这是验证错误的根源；
- 若需完全禁用浏览器原生验证（不推荐），可加 novalidate 到
- 移动端键盘类型由 type="number" 自动触发数字键盘，step 设置不影响此行为。
总结：这不是 bug，而是 HTML 表单控件对数据约束的主动保障。合理设置 step 是兼顾用户体验与数据完整性的关键——让输入规则清晰可见、验证逻辑可预测，才是真正健壮的表单实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
