最轻量兼容方案是用JavaScript监听开始时间change事件，动态设置结束时间框min属性为合法"HH:MM"字符串；开始清空时需清除min；该方案仅适用于同一天内时间段约束。
用 min 动态绑定结束时间输入框
HTML 原生 <input type="time"> 本身不支持跨字段校验，但可以通过 JavaScript 监听开始时间变化，实时更新结束时间框的 min 属性。这是最轻量、兼容性最好（IE10+）的做法。
关键点在于：结束时间框的 min 必须是合法的 time 格式字符串（"HH:MM"），且不能晚于当天 23:59；如果开始时间是 "14:30"，结束时间 min 就设为 "14:30"，浏览器会自动禁用更早选项。
- 必须用
addEventListener("change")，而不是input—— 否则用户还没选完（比如只输到"14:"）就触发，导致value为空或非法 - 如果开始时间清空（
value === ""），应同步清除结束时间框的min，否则残留的min会继续限制选择 - 注意时区无关性：
type="time"始终按本地时区解析，无需手动处理 UTC 或 offset
JavaScript 示例：双向联动 + 清空逻辑
<input type="time" id="start" />
<input type="time" id="end" />
<script>
const start = document.getElementById("start");
const end = document.getElementById("end");
start.addEventListener("change", () => {
if (start.value) {
end.min = start.value;
// 如果当前 end 值早于 start，重置它（可选）
if (end.value && end.value < start.value) {
end.value = start.value;
}
} else {
end.min = ""; // 清除 min 约束
}
});
</script>
为什么不用 setCustomValidity() 做表单验证？
虽然 checkValidity() + setCustomValidity() 能在提交时提示错误，但它不阻止用户输入或选择无效值，UI 上无即时反馈，体验割裂。用户可能反复选错、提交失败才看到提示。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
setCustomValidity()是补救手段，适合兜底（比如后端返回冲突），不是替代min的首选 - 如果必须用，记得在
start变化后调用end.checkValidity()触发重校验，否则错误状态不会自动更新 - 移动端 Safari 对
setCustomValidity()的弹窗样式支持较弱，容易被忽略
注意隐藏但关键的边界情况
当开始时间是 "23:59"，结束时间 min 设为 "23:59" 是合法的，但用户无法选 "00:00"（次日）——因为 type="time" 不含日期，"00:00" < "23:59" 为 true，会被禁用。这说明该方案天然只适用于「同一天内」的时间段约束。
立即学习“前端免费学习笔记（深入）”；
- 如果业务允许跨天（如夜班 22:00 → 06:00），就不能依赖
min，得改用日期时间组合（type="datetime-local"）或自定义下拉/Picker - 部分安卓 WebView 对
min的响应有延迟，建议加end.disabled = false显式启用（尤其之前被 JS 禁用过） - 不要用
step属性配合min来“对齐”时间粒度（如每15分钟），step仅影响键盘输入和微调按钮，不影响min的生效逻辑
