step属性是html5中实现数值输入框步长限制的原生方式，定义合法值间隔，默认为1，支持小数和"any"，需配合min/max使用并注意浏览器兼容性与手动输入校验。
在HTML5中，step 属性是实现数值输入框（<input type="number">）按指定步长（倍数）输入限制最直接、原生的方式。它不依赖JavaScript，浏览器会自动校验、高亮非法值，并影响上下箭头点击和光标微调行为。
step 属性的基本作用与语法
step 定义了合法输入值之间的间隔。用户输入或通过上下箭头调整时，只能落在以 min（或 0，若未设 min）为起点、以 step 为公差的等差数列上。
- 默认值为
1（即只允许整数） - 可设为小数，如
step="0.5"允许 0、0.5、1、1.5… - 设为
step="any"表示取消步长限制（但仍受 min/max 约束） - 若未设置 min，起始点默认为 0；若设置了 min，则第一个合法值为 ≥ min 的最小 step 倍数
常见倍数限制场景与写法
根据业务需求，灵活组合 min、max 和 step 即可实现精确控制：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
仅允许 5 的倍数（如 0、5、10、15…）：
<input type="number" step="5"> -
从 10 开始，每次增减 10（10、20、30…）：
<input type="number" min="10" step="10"> -
允许两位小数的金额（如 9.99、19.99）且必须是 0.01 的倍数：
<input type="number" step="0.01" min="0"> -
仅允许偶数（2 的倍数），范围 0–100：
<input type="number" min="0" max="100" step="2">
注意事项与兼容性提醒
step 是语义化约束，但需注意以下实际表现：
- 用户仍可手动输入不符合 step 的值（如
step="5"时输入7），提交前浏览器会标记为无效（:invalid），可通过 CSS 或checkValidity()检测 - 部分旧版 Safari 对
step支持较弱，建议配合 JavaScript 校验兜底 - 若同时设了 min 且不是 step 的整数倍（如
min="1"、step="5"），首个合法值是 5（≥1 的最小 5 的倍数），而非 1 - 移动端软键盘可能不显示数字类型，建议加
inputmode="decimal"或inputmode="numeric"提升体验
简单验证与反馈增强
利用原生约束 + 少量 JS 可提升健壮性：
- 监听
input或change事件，调用element.checkValidity()判断是否合规 - 非法时用
setCustomValidity("请输入 5 的倍数")提供明确提示 - 配合 CSS：
input:invalid { border-color: #e53e3e; }<br>input:valid { border-color: #38a169; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
