step属性控制number输入框的数值间隔精度，如step="0.5"支持0.5小时粒度，需配合type="number"使用，且前后端均须校验以确保合法。
step属性在number输入框中控制工时填报精度
HTML step 属性本身不“规范单位”，它只约束用户可输入的数值间隔。工时填报常见的「0.5小时」「15分钟」等粒度，必须靠 step 配合 type="number" 和合理的 min/max 共同实现。
直接写 step="0.5" 是最常用做法，但要注意：浏览器默认允许手动输入任意值（绕过 step 限制），所以仅靠 HTML 属性无法完全阻止非法输入，后端或 JS 仍需校验。
-
step="0.5"：支持填 1、1.5、2、2.5……适合以半小时为最小单位的工时系统 -
step="0.25"：对应 15 分钟（0.25 小时），填 0.25、0.5、0.75、1…… -
step="1"：只允许整数小时，如排班类场景 - 避免用
step="15"表示 15 分钟——单位必须统一为「小时」，否则语义错乱且校验难对齐
为什么type="number"比type="text"更适配step
type="number" 是唯一能激活 step 约束行为的输入类型。换成 type="text" 后，step 完全失效，连上下箭头都不会出现。
移动端尤其明显：iOS Safari 在 type="number" 下会弹出数字键盘（带小数点），而 type="text" 弹出的是全键盘，容易误输字母或符号。
- 必须写
，不能省略type - 不要加
pattern或正则试图“增强” number 输入——两者冲突，pattern 在 number 类型下被忽略 - 若需显示「小时」单位文字，用
或右侧，别塞进 value 或 placeholder 里干扰数值解析
常见错误：step="any"和step未声明的实际表现
step="any" 允许任意精度小数（如 1.23456），看似灵活，实则埋雷：后端可能按 float 解析导致精度丢失；数据库字段若为 DECIMAL(5,1)，存 1.23 就被截断成 1.2。
不写 step 属性时，浏览器默认按 step="1" 处理，即只接受整数——这常导致用户输入 0.5 时表单验证失败却不知原因。
- 显式声明
step是明确业务意图的最低成本方式 - 避免
step="any"，除非你真需要秒级工时（如音视频剪辑计费）且全链路支持高精度 - Chrome 控制台里检查元素，能看到浏览器自动补全的
step值，方便调试是否被意外覆盖
配合JavaScript做二次校验的必要性
用户可以右键「检查元素」后直接修改 HTML 中的 step 值，或粘贴非法数字（如 "1.333" 在 step="0.5" 下应被拒绝）。所以仅靠 HTML 属性不够。
简单可靠的校验逻辑是：取值 → 转数字 → 除以 step → 判断余数是否为 0（注意浮点误差）。
function isValidStep(value, step) {
const num = parseFloat(value);
if (isNaN(num)) return false;
return Math.abs((num / step) % 1) <p>这个判断必须在提交前执行，且服务端要重复相同逻辑——因为前端校验可被绕过。</p><p>真正容易被忽略的点：step 的数值精度本身会影响 JS 计算结果，比如 <code>step="0.1"</code> 在二进制浮点下无法精确表示，建议优先选 0.5、0.25、0.125 这类 2 的负幂次方值。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
