直接用 onfocus 或 addEventListener('focus', ...) 即可监听，与普通 input 一致；常见失效原因是 DOM 未就绪、父容器不可交互或移动端平台差异导致焦点流程异常。
HTML <input type="time"> 怎么监听获得焦点？
直接用 onfocus 或 addEventListener('focus', ...) 就行，它和其他 <input> 一样响应标准焦点事件，不存在特殊限制。
为什么有时 focus 事件没触发？
常见原因是浏览器自动聚焦逻辑干扰，或元素未渲染完成就绑定事件。尤其在 Vue/React 等框架中，DOM 节点可能还没挂载。
-
type="time"在 iOS Safari 上默认不支持原生时间选择器（会降级为文本输入），此时焦点行为正常，但交互体验不同 - 某些 Android 浏览器（如旧版 Chrome）在软键盘弹出时可能短暂中断 focus 流程，建议加
setTimeout延迟检查document.activeElement - 如果父容器有
pointer-events: none或visibility: hidden，焦点无法进入，需确保元素可交互且可见
focus 和 focusin 有什么区别？
focus 不冒泡，focusin 冒泡 —— 这意味着如果你要在父容器统一监听所有子输入框的聚焦，得用 focusin。
<div id="form-group">
<input type="time" id="start-time">
<input type="time" id="end-time">
</div>
<script>
document.getElementById('form-group').addEventListener('focusin', (e) => {
if (e.target.type === 'time') {
console.log('time input focused:', e.target.id);
}
});
</script>
移动端要注意什么？
真机上点击时间输入框，系统时间选择器弹出前会先触发 focus，但部分安卓 WebView 会在选择器关闭后意外触发一次 blur + focus（伪重复聚焦），容易导致状态错乱。
立即学习“前端免费学习笔记（深入）”；
- 避免在
focus回调里直接修改value，否则可能打断用户选择流程 - 如需预填充，应在组件初始化或
DOMContentLoaded后设置，而非等focus时才设 - 测试时务必用真机，模拟器对 focus 时机的模拟常不准确
