type="time"的step属性仅用于表单验证，不影响原生时间选择器的显示粒度；浏览器ui仍显示1分钟间隔选项，无法实现“只显示指定分钟”的效果，必须改用或第三方js控件。
type="time" 的 step 属性根本不会影响原生时间选择器的显示粒度
浏览器原生 <input type="time"> 的 UI（比如 Chrome 的下拉时间轮盘、Edge 的时间选择弹窗）完全忽略 step 值对“显示项”的控制。即使你写 step="60" 或 step="300"，它依然默认显示 1 分钟间隔的选项（00:00, 00:01, 00:02…），只是提交时会校验是否符合 step 规则——但这不是你想要的“只显示分钟”效果。
想只显示分钟（如 00:00、00:15、00:30），必须放弃原生 time 输入控件
原生控件不支持隐藏秒、跳过秒数显示或限制分钟粒度。可行路径只有两个：
- 用
<select></select>手动构造分钟选项列表（最轻量、兼容性最好） - 用第三方库（如 flatpickr、Cleave.js）或自研 JS 控件，接管输入与渲染
例如用 <select></select> 实现 15 分钟一档：
<select name="meeting_time"><option value="09:00">09:00</option> <option value="09:15">09:15</option> <option value="09:30">09:30</option> <option value="09:45">09:45</option></select>
step 在 type="time" 中唯一生效的场景是表单验证
当用户手动输入（比如键盘敲 09:30）或通过其他方式设值后，浏览器会在提交或调用 checkValidity() 时检查是否满足 step。例如：
-
<input type="time" step="900">（900 秒 = 15 分钟）→ 只接受00:00、00:15、00:30等值 - 但用户仍能用鼠标滚轮或点击选择
00:07，此时validity.stepMismatch === true - 也就是说，
step是“校验锁”，不是“UI筛”
移动端 iOS Safari 对 step 完全不支持
iOS 上 <input type="time"> 忽略所有 step 设置，既不校验也不影响 picker UI。Android Chrome 虽支持校验，但 picker 仍显示全分钟。这意味着：依赖 step 实现“只选分钟”在真实设备上基本不可靠。
真正要控制可选时间点，就得绕开原生控件——要么服务端兜底校验，要么前端用 <select></select> 或 JS 组件做确定性约束。别指望 step 能帮你省掉这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
