应使用change事件监听变化,因其在用户完成选择(点确定、失焦或回车)且值实际变更时触发,格式为"hh:mm"字符串;input事件不可靠,blur易误报,移动端需注意ios兼容性问题。

HTML <input type="time"> 该用哪个事件监听变化
直接用 change 事件,不是 input,也不是 blur。因为 type="time" 在大多数浏览器中(Chrome、Edge、Safari)不会在用户拖动时间滚轮或点击增减按钮时持续触发 input;它只在值真正提交/确认后才算“改变”,change 正好匹配这个语义。
常见错误是套用文本框习惯写 oninput,结果发现点小时钟面板选时间没反应——那是因为用户还没“确认”选择,输入框内部仍处于编辑态,DOM 值未更新,input 事件不触发。
-
change:用户完成选择(点确定、失焦、回车),且值实际发生变化时触发 -
input:仅在部分浏览器(如 Chrome 某些版本)手动键盘输入时可能触发,不可靠 -
blur:失焦就触发,但值可能没变,容易误报
如何正确绑定并获取选中的时间值
绑定 change 后,直接读 event.target.value 即可,格式固定为 "HH:MM"(24 小时制,两位小时+两位分钟,无秒、无时区)。注意它返回的是字符串,不是 Date 对象。
示例:
<input type="time" id="meeting-time"><script>
document.getElementById('meeting-time').addEventListener('change', (e) => {
console.log(e.target.value); // 如 "14:30"
});
</script>
- 值为空时
e.target.value是空字符串"",不是null或undefined - 不要试图用
new Date(e.target.value)直接解析——缺少日期信息,会得到 Invalid Date - 若需转成时间戳,先拼一个基准日期(如
"1970-01-01T" + e.target.value),再用Date.parse()
移动端 Safari 和旧版 Android 的兼容性坑
iOS Safari 对 type="time" 的支持较弱:iOS 15.4 之前不触发 change 事件;即使新版,点击时间选择器后有时也不自动失焦,导致 change 延迟或不触发。
- 必须加
autocomplete="off"防止某些安卓浏览器自动填充干扰 - 可额外监听
blur作为兜底,但要配合防抖和值比对(避免重复处理) - 更稳妥的方案是降级为两个
<select></select>(时/分)或使用第三方库(如 flatpickr),但代价是失去原生体验和无障碍支持
为什么不能用 setInterval 轮询检测值变化
有人试过每 100ms 读一次 input.value,这不仅浪费 CPU,而且根本捕获不到中间状态——原生时间选择器在展开期间,DOM 值始终不变,直到用户确认。轮询既无效又违背事件驱动原则。
真正需要响应“正在编辑中”的场景极少;如果业务真有强需求(比如实时预览),应改用自定义控件,而非硬套原生 time 输入框。
原生 time 的设计哲学就是“确认即提交”,强行绕过这个约定,往往意味着你选错了控件类型。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











