step 属性仅对 type="number" 等少数类型生效，type="text" 中无效，type="range" 虽支持但逻辑独立；浏览器会自动修正非步进输入值，如 step="0.1" 时 0.15 变为 0.2；需配合 inputmode="decimal" 提升移动端小数输入体验。
step 属性只对 type="number" 有效
很多人给 type="text" 或 type="range" 也加 step，结果发现没反应——这是常见误解。浏览器只在 type="number"（以及 type="date" 等少数类型）中解析并强制执行 step。对 type="text" 加 step="0.1" 完全无效；type="range" 虽支持 step，但它的步进逻辑由滑块自身实现，不依赖输入框校验。
实操建议：
- 明确设置
type="number"，否则step不起作用 - 若需小数步进，必须同时提供
step和合理的min/max，否则部分浏览器（如 Safari）可能拒绝输入小数 - 避免用
step="any"配合浮点数输入——它绕过校验，但失去控件级约束，后续需 JS 补充验证
step="0.1" 输入 0.15 会被自动修正为 0.2
浏览器会主动四舍五入或截断到最近的有效步进值，不是“禁止输入”，而是“矫正输入”。比如 step="0.1"、min="0" 下，用户手动输入 0.15，失焦后自动变成 0.2；输入 0.17 同样变为 0.2。这不是 bug，是规范行为。
实操建议：
- 若需保留原始输入精度（如价格录入），不要依赖
step校验，改用 JS 监听input或blur做自定义校验 - 使用
step="0.01"时注意：某些旧版 Chrome 对浮点精度处理异常，可改用整数倍方案（如以分为单位，step="1"，再 JS 转换） - 测试时务必在目标浏览器中手动输入非步进值，观察是否被修正——不能只靠点击上下箭头
移动端数字键盘不总按 step 显示小数点
iOS Safari 和部分 Android 浏览器在 type="number" 下，默认弹出的数字键盘可能没有小数点键（尤其当 step 为整数时）。即使设了 step="0.1"，键盘仍可能只显示 0–9 和删除键，导致用户无法输入小数。
实操建议：
- 加
inputmode="decimal"（HTML5 属性），提示移动端显示带小数点的键盘；但注意 iOS 仅从 Safari 16.4+ 开始支持 - 兜底方案：用
type="text"+inputmode="decimal"+ JS 正则限制（如/^\d*\.?\d{0,2}$/），放弃原生step校验，换可控性 - 避免同时设
pattern和step——pattern在type="number"中被忽略，徒增维护负担
JavaScript 获取 value 时要注意类型和精度
input.value 总是字符串，哪怕用户输入的是数字；而 input.valueAsNumber 返回 number 类型，但它受 step 影响——如果当前值不符合步进规则（如被用户粘贴了非法值），valueAsNumber 会返回 NaN。
实操建议：
- 优先用
input.valueAsNumber获取数值，但必须检查是否为NaN，否则后续计算会出错 - 不要用
parseInt(input.value)处理小数——它会截断，parseFloat更合适，但仍需配合isNaN()判断 - 提交前校验：用
(value - min) % step === 0可靠性低（浮点误差），推荐用Math.abs((value - min) / step - Math.round((value - min) / step))
真正麻烦的是混合场景：既要原生步进控制，又要兼容老设备、保留小数精度、适配不同键盘——这时候往往得放弃纯 HTML 方案，用轻量 JS 控制输入流更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
