html5 的 step 属性限定 number 输入框的数值间隔，影响可输入值及浏览器增减按钮行为；默认为1，支持小数如0.1或"any"，需与min/max协同生效，配合javascript校验提升兼容性。

HTML5 的 step 属性用于限定 <input type="number"> 输入框中允许输入的数值间隔，它不改变输入框外观，但会影响用户可输入/调节的值，以及浏览器内置增减按钮（上下箭头）的行为。

基本语法与默认行为

step 是一个可选属性，写在 number 类型的 input 标签内。其值可以是正数、小数或字符串 "any"：

• 未设置 step 时，默认值为 1，即只允许输入整数（如 0、1、2…）
• 设为 step="0.1"，则允许输入如 0.1、0.2、1.5 等一位小数的值
• 设为 step="any"，表示不限制步长，用户可输入任意合法数字（包括任意精度小数）

与 min 和 max 协同控制有效范围

step 的实际作用需结合 min 和 max 才能完整生效。浏览器会从 min 开始，按 step 递增，直到不超过 max，生成所有合法值：

• 例如：<input type="number" min="1" max="5" step="2">，合法值为 1、3、5
• 若 min="1.5" step="0.2"，则第一个合法值是 1.5，后续为 1.7、1.9、2.1…
• 注意：若 min 不是 step 的整数倍（如 min="1" step="0.3"），部分浏览器可能允许输入 1，但用箭头调节时会跳到最接近的合法值（如 1.2）

常见配置示例与注意事项

根据业务场景选择合适 step 值，避免隐式精度问题：

• 金额输入常用 step="0.01"（分单位），配合 min="0" 和 value="0.00"
• 年龄、数量等整数场景，显式写 step="1" 更清晰（比省略更明确意图）
• 避免使用浮点步长引发精度误差（如 step="0.1" 在二进制中无法精确表示），必要时用整数处理（如以“分”代替“元”）
• 移动端 Safari 对 step 支持良好，但旧版 Android 浏览器可能忽略该属性，建议辅以 JavaScript 校验

与表单验证和 JavaScript 的配合

step 影响原生表单验证（checkValidity()）结果，但不阻止用户手动输入非法值：

• 用户输入 2.05 且 step="0.1" 时，提交前会提示“值必须为 0.1 的倍数”
• 可通过 input.validity.stepMismatch 判断是否步长不匹配
• 监听 input 或 change 事件时，建议用 parseFloat(value) 再校验是否符合 step 规则，增强兼容性

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