HTML input元素step属性使用教程-html教程-PHP中文网

step不是万能精度开关，仅对number、range、date、time、datetime-local、month、week有效；在text或email中无效；date常忽略step；time和datetime-local以秒为单位；浮点step存在精度问题，推荐换单位或补零处理。

html input元素step属性使用教程

直接说结论：step 不是“设了就生效”的万能精度开关，它只在特定 type 下起作用，且必须和 min、value 对齐，否则浏览器会静默修正甚至让输入框失灵。

哪些 input type 支持 step 属性

step 只对 type="number"、type="range"、type="date"、type="time"、type="datetime-local"、type="month"、type="week" 有效；在 type="text" 或 type="email" 上写 step="0.01" 完全无效——DevTools 能看见属性，但 spinner 按钮不出现、校验不触发、stepUp() 报错或静默失败。

type="date" 的 step 大部分浏览器忽略（如设 step="7" 仍按天选）
type="time" 的 step 单位是秒，不是分钟：要每15分钟一档，必须写 step="900"（15 × 60），写 step="15" 是15秒
type="datetime-local" 同样以秒为单位，且只接受整数，step="30.5" 会被截断为 30

step="0.1" 输入 0.15 却变成 0.2 或报错

这不是拦截，是浏览器自动矫正：当用户手动输入不符合 step 规则的值（如 step="0.1" 下输 0.15），失焦或提交时，Chrome/Firefox 会四舍五入到最近合法值（0.2）；Safari 可能直接截断为 0.1。根本原因是浮点精度问题——二进制无法精确表示 0.1，旧版 Chrome 甚至会把 step="0.1" 当作 step="1" 处理。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

安全做法是换单位：金额用“分”，设 min="100"、step="1"、value="199" 表示 1.99 元
必须用小数时，统一补零：min="0.00"、max="10.00"、step="0.01"，避免 min="0" 和 step="0.01" 混用
别自己写 parseFloat(val) + 0.1，改用原生 input.stepUp(1)，它严格按当前 step 执行，不引入 JS 浮点误差

动态修改 step 后 spinner 失灵或跳变

直接赋值 el.step = "0.5" 不可靠——浏览器不会自动重算合法值集合，旧 value 很可能已非法，导致拖不动、点 ↑ 就跳到意外数字、方向键失效。

优先用 el.setAttribute("step", "0.5")，部分浏览器响应更稳定
紧跟着重置 value：el.value = (Math.round(parseFloat(el.value) / 0.5) * 0.5).toFixed(1)
快速连续切换时，加 requestAnimationFrame 延迟执行重置，避免状态残留
改完立刻调用 el.checkValidity() 主动校验，必要时 el.reportValidity() 提示用户

step="any" 并不等于“放开一切”

step="any" 不是偷懒关闭校验的方案，而是禁用步长对齐逻辑：上下箭头和 stepUp() 全部退化为 ±1 整数增减（value="1.5" 点 ↑ 变成 2.5，不是 1.6）；表单提交时不再检查 validity.stepMismatch，但仍校验是否为合法数字（"abc" 仍报错）。