原生支持 blur 事件，但桌面端点击时间选择器内部控件（如上下箭头）时焦点被内部元素抢占，导致 blur 不触发；键盘 tab 或点击其他可聚焦元素则正常触发；移动端 native picker 行为不一致，ios safari 唤起即触发 blur，关闭不再触发；建议 blur 用于 ui 收尾，change 用于业务逻辑，必要时结合 settimeout 或 input 事件确保获取最终值。
HTML <input type="time"> 怎么监听失去焦点（blur）
直接给 <input type="time"> 绑定 onblur 或 addEventListener('blur', ...) 就行，它和其他 <input> 一样原生支持 blur 事件。不需要额外 polyfill 或 hack。
为什么有时候 blur 没触发？常见原因
不是事件不支持，而是交互行为导致你以为没触发：
- 在 Chrome / Edge 中点击时间选择器的「上下箭头」或「AM/PM」按钮时，焦点会短暂离开 input，但立刻又被时间面板内部元素抢走，最终 input 不触发
blur - 用户用键盘操作（Tab 切出）一定触发；鼠标点其他可聚焦元素也一定触发；但点时间选择器内部控件（如滚动小时滚轮）不算「真正失焦」
- 移动端（iOS Safari、Android Chrome）的时间选择器是全屏 native picker，唤起和关闭过程中 input 的 focus/blur 行为不一致，
blur通常只在 picker 关闭后触发一次
blur 和 change 应该选哪个？
二者用途不同，别混用：
-
blur：只关心用户是否离开了这个输入框，不管值有没有变。适合做「收起下拉」「校验格式」「清空临时提示」 -
change：只在用户修改了值并失焦（或回车）后触发，且新旧值不同时才触发。适合做「提交数据」「联动更新」 - 如果既要响应失焦，又要确保值有效，建议两个都监听：
blur做 UI 收尾，change做业务逻辑
示例：
<input type="time" id="meeting-time"><script>
const el = document.getElementById('meeting-time');
el.addEventListener('blur', () => console.log('用户离开了时间框'));
el.addEventListener('change', () => console.log('时间值确实被改了', el.value));
</script>
兼容性与移动端注意事项
blur 事件本身全浏览器支持，但时间选择器的行为差异会影响你的预期：
- iOS Safari：唤起 native time picker 后，input 立即触发
blur；关闭 picker 后不会再次触发blur（因为焦点没回来过） - Android Chrome：类似 iOS，但部分版本在 picker 关闭后会补发一次
blur（如果之前没发过） - 如果你依赖「picker 关闭后立刻读取值」，不要只靠
blur，加个setTimeout(() => { ... }, 0)或监听input事件更稳妥
真正容易被忽略的是：你写的 blur 处理函数，可能在用户还没关掉时间选择器时就被调用了——尤其在桌面端点击箭头时。这时候 el.value 还是旧值，甚至可能是空字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
