原生 <input type="time"> 的 min 属性仅用于提交验证且按字符串比较，无法实时禁用过去时间；需用 JavaScript 监听 input 事件，对比当前时间并动态重置或提示，辅以动态设置 min 提升 UI 限制效果。
HTML <input type="time"> 怎么禁用过去时间？
原生 <input type="time"> 不支持 min 属性限制“已过的时间点”——它只校验格式，不校验逻辑时间有效性。即使你设 min="09:00"，用户仍可手动输入或通过滚动选中 08:59，浏览器不会拦截。
为什么 min 对 type="time" 失效？
min 和 max 在 time 输入框中仅用于表单验证（submit 时触发），且只比对字符串字典序，不是真实时间计算。比如：min="14:30" 会错误拒绝 "9:00"（因为 "9" > "14" 字符串比较），也完全无法阻止用户选 "13:00" ——只要没触发 submit，一切照常。
真正能拦住过去时间的三个实操方式
必须结合 JavaScript 实时控制，推荐按优先级使用：
- 监听
input和change事件，用new Date()获取当前小时/分钟，对比用户输入值；若早于当前时间，立即重置为当前时间或清空 + 提示 - 在页面加载时动态设置
min属性（如input.min = "14:22"），虽不能阻止输入，但能让部分浏览器在 UI 滚动选择器中禁用早于该值的选项（Safari 和 Chrome 部分版本支持） - 禁用原生控件：用
readonly+ 自定义下拉/数字选择器，彻底绕过原生 time 的不可控行为（适合需要强一致性的业务场景）
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
const timeInput = document.querySelector('input[type="time"]');
const now = new Date();
const current = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
timeInput.min = current;
timeInput.addEventListener('input', () => {
const [inputH, inputM] = timeInput.value.split(':').map(Number);
const [nowH, nowM] = [now.getHours(), now.getMinutes()];
if (inputH < nowH || (inputH === nowH && inputM < nowM)) {
timeInput.value = current;
}
});
移动端兼容性要注意什么？
iOS Safari 的 time 输入器不响应 min，Android Chrome 表现也不统一。不要依赖样式禁用或 CSS pointer-events: none，这会破坏可访问性。最稳妥的是：JavaScript 校验 + 用户友好的反馈（比如 setCustomValidity() 配合 reportValidity()）。
真正麻烦的不是写几行代码，而是得同时处理手动输入、滚动选择、粘贴、自动填充这四种输入路径——漏掉任意一种，过去时间就可能进到后端。
