input type="time" 的 min/max 经常不生效，因浏览器支持不一致（尤其 safari 和部分 android 浏览器），且值必须严格为 hh:mm 格式（补零、无秒/时区），否则被忽略；需配合 javascript 校验与 setcustomvalidity。
input type="time" 的 min/max 为什么经常不生效
因为浏览器对 type="time" 的 min 和 max 支持不一致，尤其在 Safari 和部分 Android 浏览器中，它们可能被忽略或仅影响 UI（比如禁用滚动选项），但不阻止用户手动输入非法值。更关键的是：min 和 max 值必须严格符合 HH:MM 格式（24 小时制，两位小时 + 冒号 + 两位分钟），且不能带秒或时区。
正确设置 time 类型的 min/max 值格式
错误写法：min="9:00"、max="17:0"、min="09:00:00" —— 这些都会导致约束失效或被浏览器静默忽略。
正确写法必须满足：
-
min和max值为HH:MM字符串，小时和分钟都需补零（如上午 9 点写成"09:00"，不是"9:00"） - 不能包含秒、毫秒、AM/PM 或时区信息
-
min必须早于max，否则整个约束逻辑被浏览器丢弃
示例：<input type="time" min="08:30" max="17:45">
仅靠 HTML 属性无法可靠校验，必须配合 JavaScript
用户仍可通过键盘直接输入超出范围的时间（例如在 Chrome 中按 Tab 后手动键入 "06:00"），min/max 不会触发 invalid 状态，checkValidity() 也可能返回 true —— 这是规范允许的行为。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实际校验建议：
- 监听
input和change事件，解析value并与min/max对比（注意将"09:00"转为分钟数或Date时间戳比较） - 使用
setCustomValidity()主动标记无效状态，触发原生提示 - 提交前再次调用
checkValidity()，但别依赖它自动拦截
简短示例逻辑：
const timeInput = document.querySelector('input[type="time"]');
timeInput.addEventListener('input', () => {
const [h, m] = timeInput.value.split(':').map(Number);
const totalMinutes = h * 60 + m;
const minMins = 510; // 08:30 → 8*60+30
const maxMins = 1065; // 17:45 → 17*60+45
if (totalMinutes maxMins) {
timeInput.setCustomValidity('请选择 08:30 至 17:45 之间的时间');
} else {
timeInput.setCustomValidity('');
}
});
移动端和 Safari 的特殊处理
iOS Safari 完全忽略 min/max 对 type="time" 的约束，时间选择器仍显示全天范围。Android Chrome 表现略好，但键盘输入不受限。
如果业务强依赖时间范围控制，更稳妥的做法是：
- 改用
type="text"+ 自定义时间选择组件（如 flatpickr 或原生<input type="datetime-local">配合日期过滤） - 或退而求其次，用
type="datetime-local"并固定日期（如设min="2024-01-01T08:30"），虽多出日期字段，但 min/max 在多数浏览器中更可靠 - 服务端必须做二次校验 —— 前端约束只是体验优化，不是安全边界
真正起作用的从来不是 min 和 max 这两个属性本身，而是你是否在用户能绕过它的所有路径上都补了校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
