step属性在time类型输入框中不生效。HTML <input type="time"> 的step属性被主流浏览器忽略，仅影响表单验证而不改变UI粒度，需用JavaScript或自定义控件实现时间间隔控制。
step属性在time类型输入框中是否生效
不生效。HTML <input type="time"> 的 step 属性在绝大多数浏览器（Chrome、Edge、Firefox）中被忽略，即使写上 step="300"（即5分钟），原生时间选择器仍只提供1分钟粒度的选项，无法强制限制为5分钟一档。
为什么time输入框的step被忽略
W3C规范虽允许 step 用于 time 类型，但实际实现由浏览器厂商决定。目前主流引擎（Blink、Gecko）未将 step 映射到时间选择器UI逻辑中——它仅影响表单验证阶段的“合法值判断”，而非UI交互粒度。
- 用户手动输入
"09:07"且step="300"时，提交会报错："The specified value does not conform to the required format." - 但通过点击时间滚动器选中
"09:07"，浏览器不会阻止，也不会自动修正为"09:05"或"09:10" -
step对type="datetime-local"同样无效（仅type="number"和type="range"稳定支持）
真正能控制时间间隔的替代方案
必须放弃依赖原生 step，改用 JavaScript 控制输入值或自定义选择器：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
input或change事件，用new Date()解析时间字符串，按秒数取整（如Math.round(totalSeconds / 300) * 300），再格式化回"HH:MM" - 禁用原生输入框，用两个
<select>分别选小时和分钟（分钟选项只列0,5,10,...,55） - 使用第三方库（如 flatpickr、Pikaday）并配置
minuteIncrement: 5等参数
示例（简单JS修正）：
<input type="time" id="meeting-time">
<script>
document.getElementById('meeting-time').addEventListener('change', function() {
const [h, m] = this.value.split(':').map(Number);
const totalMinutes = h * 60 + m;
const rounded = Math.round(totalMinutes / 5) * 5; // 5分钟粒度
const outH = String(Math.floor(rounded / 60)).padStart(2, '0');
const outM = String(rounded % 60).padStart(2, '0');
this.value = `${outH}:${outM}`;
});
</script>
移动端兼容性特别注意
iOS Safari 完全不支持 type="time" 的任何 step 行为，且其原生时间控件无粒度调节能力；Android Chrome 虽显示滚动选择器，但内部仍按1分钟步进。所有依赖 step 实现时间间隔控制的方案，在移动设备上必然失效——必须用 JS 或自定义 UI 覆盖。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：表单提交前不做 JS 校验，仅靠 step 属性，移动端用户几乎一定会提交非法时间值。
