step属性仅对type="number"、"range"、"date"、"time"、"datetime-local"、"month"、"week"有效；其本质是定义合法值集合的公差，需满足value=min+n×step（n为整数），否则校验失败。
step属性只在哪些input类型上生效
它只对 type="number"、type="range"、type="date"、type="time"、type="datetime-local"、type="month"、type="week" 有效。其他类型如 type="text"、type="tel"、type="color" 即使写了 step="0.1" 也完全不触发任何行为——浏览器既不校验，也不改变输入逻辑，控制台更不会报错。
常见误操作是给数字输入框写成 ，结果上下箭头不出现、粘贴小数不拦截、提交也不校验。必须改成 type="number" 才能激活 step 的全部能力。
怎么写step值才能真正约束取值
step 不是“小数位数开关”，而是定义合法值集合的公差：所有允许的值必须满足 value === min + n × step（n 为整数）。这个等式不成立，浏览器就判定为非法。
-
min="0"、step="0.1"→ 合法值：0, 0.1, 0.2, ..., 0.9, 1.0 -
min="0.05"、step="0.1"→ 第一个合法值是 0.05，下一个是 0.15，0.1 无法通过箭头到达（但手动输入可能被接受） -
min="1"、step="0.3"→ 合法值是 1, 1.3, 1.6, 1.9... 中间存在空档，部分浏览器会静默修正 value 或让 spinner 失灵 - 避免浮点误差：直接写
step="0.1"可能导致0.30000000000000004这类值；更稳的做法是用整数缩放：min="1"、max="10"、step="1"，再在 JS 里除以 10
移动端和旧版 WebView 的 step 行为差异
iOS Safari 对 type="range" 的 step 支持稳定，但 Android 4.4 系统自带 WebView 完全忽略 step，拖动返回连续浮点值；部分安卓浏览器还会跳过中间刻度，直接落到最近合法值，且触发时机晚于 PC。
更关键的是：原生滑块 UI 不显示刻度线，用户根本不知道自己能选哪些值。你不能靠 step 自己“说话”，必须配合 JS 预计算合法点并渲染标尺，或用 实时反馈当前对齐后的值。
如果需要严格校验，别只信 input 事件的 value，得在 change 里做对齐：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const aligned = Math.round((parseFloat(input.value) - min) / step) * step + min;
否则用户看到滑块停在“0.3”，实际值却是 0.29999999999999999，后端解析失败或 UI 显示错位都是大概率事件。
JS 修改 value 时 step 不会自动生效
用 input.value = "3.7" 或 input.valueAsNumber = 3.7 直接赋值，浏览器不会按 step 规则重算或截断。后续点击箭头仍从 3.7 开始跳，比如 step="0.5" 就会跳到 4.2，而不是你预期的 4.0。
正确做法是：JS 赋值前先对齐步进基准：
- 用
Math.round(val / step) * step取最接近的合法值 - 注意浮点误差，建议加容差判断：
Math.abs(((val - min) / step) % 1) - 改完立刻调用
input.checkValidity()，必要时input.reportValidity()主动提示 - 动态切换
step时，用input.setAttribute("step", "0.5")比直接赋input.step更可靠
真正难的从来不是写 step="0.1" 这一行，而是确认它在目标环境里是否真把值锁进了你想要的序列，以及用户能不能直观感知这个约束。别假设浏览器会帮你兜底——它只负责校验，不负责解释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
