step 属性对 type="time" 无效，浏览器仅弱提示或忽略；必须用 javascript 监听 change 事件，解析时间、按秒数步长四舍五入并重写 value 才能实现精确分钟间隔控制。
step 属性对时间类型 input 无效
HTML 的 step 属性在 <input type="time"> 上**不控制实际可选时间点的粒度**，浏览器忽略它或仅作弱提示。比如设 step="300"（5分钟），Chrome 和 Firefox 仍允许手动输入任意秒数，且原生时间选择器滑块/滚轮不会按该步长跳转。
真正起作用的是 JavaScript + 自定义约束逻辑
要实现“只允许选择整5分钟”这类效果，必须拦截用户输入并主动校正。核心思路是：监听 change 或 input 事件，解析时间值，四舍五入到最近的指定分钟间隔，再写回 value。
-
step值以秒为单位（如 5 分钟 =300），但仅用于表单验证提示（ValidityState.stepMismatch），不能替代逻辑控制 - 手动输入和点击选择器后都需触发校正，否则用户能绕过限制
- 注意时区：
value总是返回本地时区的HH:MM字符串，无需处理 UTC 转换
const timeInput = document.querySelector('input[type="time"]');
const STEP_SECONDS = 300; // 5 分钟
<p>timeInput.addEventListener('change', () => {
const [hh, mm] = timeInput.value.split(':').map(Number);
if (isNaN(hh) || isNaN(mm)) return;</p><p>const totalSeconds = hh <em> 3600 + mm </em> 60;
const rounded = Math.round(totalSeconds / STEP_SECONDS) * STEP_SECONDS;
const rHh = Math.floor(rounded / 3600) % 24;
const rMm = Math.floor((rounded % 3600) / 60);</p><p>timeInput.value = <code>${rHh.toString().padStart(2, '0')}:${rMm.toString().padStart(2, '0')}</code>;
});</p>
配合 required 和 pattern 无法替代 JS 校正
required 只检查是否为空；pattern 对 type="time" 无意义（浏览器不触发正则验证）；min/max 仅限范围限制，不解决步长问题。唯一可靠的验证方式仍是 JS 主动截获并修正值。
- 若依赖
checkValidity()，需同步调用setCustomValidity()手动标记stepMismatch - 移动端软键盘可能直接弹出数字键盘，更易输入非法值，JS 校正必不可少
- 避免在
input事件中频繁重置value，否则会打断用户连续输入，推荐用change+ 显式按钮触发校正
第三方库或自建时间选择器更可控
原生 input[type="time"] 的交互和样式高度依赖系统，跨平台行为不一致。如果业务强依赖精确步长（如预约系统每15分钟一个时段），建议用轻量级库（如 flatpickr、Cleave.js）或封装自定义组件——它们直接渲染可点击的时间格子，从源头杜绝非法值。
- flatpickr 支持
minuteIncrement: 5参数，原生支持步长滚动和点击 - 自建组件可结合
<datalist></datalist>提供预设选项，但无法阻止手动输入，仍需 JS 配合 - 不要试图用 CSS 伪元素伪造时间选择器，无障碍和可访问性会严重受损
原生 step 在 time 类型上只是个摆设，真要控制跳跃粒度，得靠 JS 拦截、计算、重写 value —— 这步绕不开，也别指望浏览器替你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
