原生 input type="time" 的 min、max 和 step 属性实际限制能力极弱：min/max 仅部分浏览器 ui 灰显且不拦截非法输入，step 在所有主流浏览器及移动端均无效；必须用 select 下拉或受控文本输入配合实时 js 校验才能可靠实现时间粒度与范围控制。
input type="time" 的 min、max 和 step 属性在实际项目中常被误用——它们看似能限制时间，但浏览器支持极不一致，多数限制仅在表单提交时触发校验，无法阻止用户选择或输入非法值。
time 输入框的 min/max 只校验不拦截
给 <input type="time"> 设置 min="09:00" 和 max="17:30" 后，Chrome 会灰掉超出范围的时间点（如 08:59），Firefox 和 Safari 则基本无视 UI 禁用，只在调用 checkValidity() 或提交时抛出 "RangeError"。更关键的是：用户仍可手动输入 "08:45" 并成功提交。
- 格式必须严格为
"HH:MM"（如"09:00"），"9:0"或"09:00:00"会被静默忽略 - 动态赋值时，必须用
input.min = "09:00"，不能用setAttribute("min", ...)（Safari 会失效） - 若当前
value已超出新设的max，浏览器不会自动清空，需手动判断并重置：if (input.value && input.value > input.max) input.value = ""
step="1800" 在主流浏览器中完全不生效
想让时间只允许选整点或半点（即 30 分钟粒度），很多人写 step="1800"（1800 秒 = 30 分钟）。但 Chrome、Firefox、Safari 均未在原生时间选择器 UI 中实现该行为——滚动/点击仍可选到 "09:07"、"10:15"；仅当调用 reportValidity() 时可能弹出 “The step attribute is not satisfied” 提示，无法用于交互控制。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 规范虽支持，但实现缺失，不能作为功能依赖
- 移动端系统时间选择器（iOS / Android）完全忽略
step - 若坚持用原生
type="time"，必须搭配实时 JavaScript 校验：oninput中解析HH:MM，检查分钟是否为00或30，否则立即修正或标记无效
真正可靠的做法是放弃原生 time，改用 select 或受控文本输入
要确保用户只能选 "09:00"、"09:30"、"10:00"……共 48 个合法值，且跨平台体验一致，唯一推荐方案是：用 <select></select> 下拉菜单生成固定选项，或用 <input type="text"> + 实时格式化 + 正则约束。
-
<select></select>方案：完全规避浏览器兼容问题，Angular/Vue/React 都容易绑定，禁用时段、动态过滤也直观（如排除午休"12:00"–"13:30"） - 受控文本方案：用
inputmode="numeric"+pattern="[0-2][0-9]:[0-5][0-9]"，配合oninput自动补零、截断、校验（如把"930"转成"09:30"，"25:00"修正为"00:00"） - 二者都需服务端二次校验——前端限制只是体验优化，不是安全边界
原生 type="time" 的限制能力非常有限，它的设计目标是“尊重系统本地习惯”，而非“强制统一交互”。真要控粒度、控格式、控范围，就得主动放弃它，用可控组件兜底。这点在 iOS Safari 和旧版 Android WebView 中尤其明显——它们直接降级为普通文本框，min/max/step 全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
