step属性仅对number、range、date等特定输入类型生效，对text等类型无效；其浮点精度问题易导致校验异常，复杂步长逻辑须用javascript实现。
step 属性只支持数字类型输入，非数字类型无效
HTML 的 step 属性本身不提供“自定义步长逻辑”，它仅对 <input type="number">、<input type="range"> 和 <input type="date">（及部分时间类型）生效。对 text、email、tel 等类型设置 step 完全被忽略——浏览器既不校验，也不影响行为。
常见误用是给 type="text" 加 step="0.5" 试图限制小数输入，结果毫无作用。
number 类型中 step 的实际行为与边界陷阱
step 在 type="number" 中控制合法值的等差序列：从 min（或 0）开始，每次加 step，直到超过 max。但它的计算基于浮点数，容易出现精度偏差。
- 若未设
min，起始点默认为 0，不是当前值或 placeholder 值 -
step="0.1"在二进制浮点下无法精确表示，可能导致0.3 + 0.1 !== 0.4，使某些“看似合法”的值被表单拒绝（如输入 0.4 后失焦，自动跳回 0.3） - 移动端软键盘可能不显示小数点，尤其在未设
step或step="1"时，默认弹出整数键盘
示例：
<input type="number" min="0" max="1" step="0.1">合法值为 0, 0.1, 0.2, ..., 1.0；但输入 0.30000000000000004（JS 计算残留）会被视为非法。
需要真正自定义步长逻辑？必须用 JavaScript 拦截
浏览器原生 step 是声明式、静态的，无法实现“步长随当前值变化”（如：小于 10 时步长为 1，大于等于 10 时步长为 5）或“非线性步长”（如：1, 2, 5, 10, 20）。这类需求只能靠 JS 控制。
- 监听
input或change事件，读取valueAsNumber，按规则四舍五入或取最近合法值 - 避免仅监听
blur，否则用户在输入中途就可能看到非法值，体验割裂 - 配合
setCustomValidity()提供明确错误提示，比依赖原生校验更可控
简例（强制步长为 0.5）：
input.addEventListener('input', () => {<br> const val = parseFloat(input.value);<br> if (!isNaN(val)) {<br> const rounded = Math.round(val * 2) / 2;<br> if (rounded !== val) input.value = rounded;<br> }<br>});
range 类型的 step 可视化表现受限于像素精度
<input type="range"> 的 step 影响可拖动位置数量，但最终渲染受容器宽度和浏览器缩放影响。例如：min="0" max="100" step="1" 理论上有 101 个档位，但若 range 宽度仅 200px，相邻档位间距不足 2px，人眼无法区分。
- 不要依赖
range实现高精度选择（如 ±0.01），用户几乎无法精准拖到目标值 - 配合
output元素实时显示数值，弥补视觉反馈缺失 - 移动端 touch 事件的触发区域远大于鼠标，
step小于 5 时易误操作
真正棘手的不是怎么写 step，而是搞清它在哪起作用、在哪失效、以及失效后该由谁补位——多数时候，那个“谁”只能是 JavaScript。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
