原生 的 step 属性无法实现秒级控制，浏览器忽略秒值、仅按分钟粒度渲染；需改用数字输入框组合或自定义组件实现秒级精度。
step 属性对 <input type="time"> 的秒数控制无效
HTML 原生 <input type="time"> 的 step 属性**不支持以秒为单位的精确控制**。浏览器会忽略 step="1" 或 step="60" 等值，统一按分钟粒度渲染（如 Chrome 只显示 :00、:05、:10…），且无法输入或选择秒数。
step 在 <input type="time"> 中的实际行为
根据 HTML 标准，type="time" 的 step 单位是**秒**，但主流浏览器（Chrome、Edge、Safari）均未实现秒级支持：
- Chrome / Edge：强制四舍五入到最近的 1 分钟（即 step 实际生效为 60），即使设
step="1"，UI 仍只显示分钟选择器 - Safari：完全忽略
step，始终显示完整时间选择器（含秒），但用户手动输入秒数后可能被自动截断或重置 - Firefox：不支持
type="time"的原生 UI，回退为文本输入，此时step无意义
真正能控制秒数的替代方案
要实现秒级精度输入，必须绕过原生 time 类型，改用以下任一方式：
-
用
<input type="number">输入总秒数：例如<input type="number" min="0" max="86399" step="1">，再用 JS 转成HH:MM:SS显示 -
拆分为三个
<input type="number">：分别控制hours、minutes、seconds，各自设step="1"并加min/max限制（如秒数min="0" max="59"） -
自定义时间选择器组件：用
<select></select>或轮播控件生成秒级选项（如每 5 秒一档），避免依赖原生time的不可靠行为
示例（三字段法）：
<input type="number" id="hours" min="0" max="23" step="1" value="14">: <input type="number" id="minutes" min="0" max="59" step="1" value="30">: <input type="number" id="seconds" min="0" max="59" step="1" value="25">
为什么不能依赖 step + type="time" 做秒级校验
即使你用 JS 监听 input 事件并手动修正秒数（比如把 "14:30:25.5" 截断为 "14:30:25"），原生控件仍可能在失去焦点时重置值，或在移动端触发不可预测的键盘行为。更关键的是：valueAsNumber 对 time 类型返回的是从当天 00:00:00 起的毫秒数，但该值受浏览器秒级支持程度影响，Firefox 返回 NaN，Safari 可能丢失秒精度。
立即学习“前端免费学习笔记（深入）”；
真正可控的秒数输入，永远需要放弃对原生 time 的幻想，用数字输入 + 显式格式化来兜底。
