HTML step属性如何支持浮点数输入-html教程-PHP中文网

这是浮点数二进制精度缺陷导致的 step 校验失败，浏览器用 (value - min) % step === 0 判定合法性，而 0.1 无法精确存储，累加后 0.4 实为 0.4000000000000001，模运算不为 0，触发 stepmismatch 并自动修正为最近合法值如 0.3。

html step属性如何支持浮点数输入

step="0.1" 为什么输完 0.4 就跳回 0.3

这不是 bug，是浮点数在二进制中无法精确表示导致的校验失败。浏览器判断合法值的公式是 (value - min) % step === 0，而 0.1 存储为 ≈0.10000000000000000555，累加四次后得到的 “0.4” 实际是 0.4000000000000001，模运算结果不为 0，触发 validity.stepMismatch。

常见表现：输入 0.4 后失焦，自动修正为 0.3 或 0.5；滑块拖到 0.4 位置松手，跳回最近合法点（如 0.3）。

必须显式设 min，且初始 value 满足 value === min + n × step（例如 min="0"、step="0.1" 时，value 应为 "0.0"、"0.1" 等）
别依赖 parseFloat(input.value) + 0.1 手动计算，改用 input.stepUp(1)——它走浏览器内置查找逻辑，不引入 JS 浮点误差
移动端软键盘可能不显示小数点，需配合 inputmode="decimal" 呼出带点键盘

step="any" 并不能解决精度问题

step="any" 只禁用步长对齐校验，不改变数值解析方式。输入 "0.1" 后读取 input.valueAsNumber 仍是 0.10000000000000001，0.1 + 0.2 还是 0.30000000000000004。

它唯一可靠的作用是让上下箭头退化为 ±1 整数增减（value="1.5" → 点 ↑ → "2.5"），并关闭 validity.stepMismatch 报错。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

旧版 Safari（≤15.4）完全忽略 step="any"，小数输入直接被清空或报 badInput
FormData.get("field") 拿到的是原始字符串，但后续若调用 Number() 或参与运算，立刻掉进浮点陷阱
若必须保留 type="number" 外观，至少加 onchange="this.value = this.value.replace(/\.?0+$/, '')" 清理尾随零（仅视觉）

真正可控的浮点输入方案是放弃 type="number"

想自由输入任意精度小数（如 "3.14159265358979323846"），type="number" 从底层就不支持。正确路径是彻底切换到 type="text"，自己掌控输入流和校验逻辑。

用 inputmode="decimal" 提升移动端体验，配合 pattern="[0-9]*\.?[0-9]*" 做基础提示
监听 input 事件，用正则过滤非法字符：this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1')
需要高精度计算时，别碰 Number()，改用 decimal.js 或字符串拆解 + BigInt（如把 "123.456" 转为整数 123456，再按小数位缩放）
提交前手动校验：是否匹配 ^-?\d*\.?\d+$、小数位数是否超限（如最多 10 位）、是否为空

金额类输入必须用整数单位

所有涉及金钱的场景，step 和浮点数就是天敌。浏览器不会帮你守住“分”这个精度底线，它只认 IEEE 754。

一律以“分”为单位：min="100"、max="99999"、step="1"、value="199" 表示 1.99 元
展示层用 JS 格式化：(value / 100).toFixed(2)，但存储和计算全程用整数
动态改 step 后必须重置 value：input.value = (Math.round(parseFloat(input.value) / newStep) * newStep).toFixed(2)
粘贴、拖拽滚动条、第三方输入法会绕过所有原生约束——step 对它们完全无效，只能靠 JS 监听兜底