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

step仅对type="number"和"type=range"生效，须配合min/max才有业务意义；浮点精度问题易致校验失败，推荐用整数单位替代小数。

html元素step属性完整使用教程

step 属性不是“输入限制开关”，它只定义合法值的数学序列，且仅对 type="number" 和 type="range" 生效；不配 min 和 max，step 就失去业务意义；浮点精度问题会让 step="0.1" 在提交时意外报错。

step 只在 number 和 range 类型中起作用

给 type="text"、type="email" 或 type="tel" 加 step 属性完全无效——浏览器既不解析，也不报错，就像没写一样。这是最常被误用的点。

type="number"：step 控制上下箭头增减量、表单提交校验（触发 ValidityState.stepMismatch）、以及合法值集合（min + n × step）
type="range"：step 决定滑块可停靠的离散位置，但不参与表单验证（range 输入永远通过原生校验）
type="date" 等时间类型也支持 step，但语义不同（如 step="7" 表示按周跳转），日常较少用

必须和 min/max 一起用才有实际约束力

单独写 step="0.01" 没有意义：合法值会从默认起点 0 开始，无限延伸到正无穷，根本无法匹配“折扣 0～1”或“价格 0～9999”这类业务范围。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确写法：<input type="number" min="0" max="1" step="0.01"> → 合法值是 0.00、0.01、0.02…1.00
错误写法：<input type="number" step="0.01"> → 合法值是 0、0.01、0.02…∞，用户输 999999 也能通过校验
注意：min 和 max 必须是数字字符串（如 "0"），不能写 "0.00" 或 "100%"，否则部分浏览器可能忽略

浮点精度会让 step="0.1" 在某些场景失效

JavaScript 用二进制存储十进制小数，0.1 + 0.2 !== 0.3 是常识；同样，浏览器内部生成合法值序列时也会产生类似误差，比如 min="0" step="0.1" 理论上应含 0.3，但实际可能存为 "0.30000000000000004"，导致用户手动输入 "0.3" 被判为非法。

推荐方案：用整数单位替代小数，例如金额用“分”代替“元”：min="0" max="10000" step="1"，JS 中再除以 100 显示
若必须用小数，避免 step 小于 0.01（旧版 Safari 支持差），优先选能被 2 的幂整除的值，如 step="0.125"
校验时别用 (value - min) % step === 0，改用容差判断：Math.abs(((value - min) / step) % 1)

用户仍可输入非法值，JS 校验不可省略

step 不拦截键盘输入、粘贴或拖动过程中的中间值；它只在失焦或表单提交时触发校验。用户输 "0.123"、粘贴 "2.4567" 都不会被阻止，Chrome/Firefox 会在提交时报 stepMismatch，Safari 可能静默接受。

推荐监听 change 事件做修正（比 input 更稳，避免光标跳脱）：

const input = document.querySelector('input[type="number"]');<br>input.addEventListener('change', () => {<br>  const val = parseFloat(input.value);<br>  if (!isNaN(val)) {<br>    const step = parseFloat(input.step) || 1;<br>    const min = parseFloat(input.min) || 0;<br>    const rounded = Math.round((val - min) / step) * step + min;<br>    input.value = rounded.toFixed(step.toString().split('.')[1]?.length || 0);<br>  }<br>});