autofocus 对 <input type="time"> 无效或不可靠,因规范未强制支持、浏览器兼容性差且移动端不弹软键盘;应改用 JavaScript 在元素挂载可见后调用 focus(),iOS 需绑定用户手势触发。

autofocus 对 <input type="time"> 无效或不可靠,别硬加 —— 它在多数浏览器中不被支持,iOS Safari 和部分 Android WebView 会直接忽略,Chrome 也常静默跳过。
为什么 autofocus 在 type="time" 上大概率失效
HTML 规范未强制要求 autofocus 支持所有 input 类型,type="time" 属于“有条件支持”:Chrome 偶尔生效但不稳定,Firefox 默认不处理,Safari 几乎总是丢弃。更关键的是,即使聚焦成功,移动端软键盘也不会自动弹出(焦点 ≠ 键盘),用户仍需二次点击。
-
autofocus是 HTML 解析阶段的一次性行为,只认初始 DOM,动态插入或条件渲染的time输入框完全无效 - 元素若包裹在
display: none或v-if中,解析时不可见 → 聚焦被跳过 - 多个
autofocus共存时,仅第一个被 HTML 解析器读到的元素有机会触发(但time类型本身就不在保障列表里)
用 focus() 手动聚焦并确保时机正确
必须用 JavaScript 主动调用 .focus(),且要等元素真实挂载、可见、且未被用户抢先操作。关键不是“能不能调”,而是“什么时候调才不白调”。
- 原生 JS:监听
DOMContentLoaded后检查offsetParent !== null和getComputedStyle(input).display !== 'none',再调用input.focus() - React:在
useEffect(() => { inputRef.current?.focus() }, [])中执行,加if (typeof window !== 'undefined')防 SSR 报错 - Vue 3:在
onMounted+nextTick后调用inputRef.value?.focus(),确保v-if已完成渲染 - 务必加守卫:
if (document.activeElement !== input),避免覆盖用户正在操作的其他输入框
聚焦后还要触发软键盘?iOS 必须绑定用户手势
在 iOS Safari 中,.focus() 单独调用无法唤起软键盘,这是平台级限制。必须让用户先触发一次手势(哪怕只是点一下空白处),后续的 .focus() 才可能连带弹出键盘。
立即学习“前端免费学习笔记(深入)”;
- 推荐做法:给
body或一个透明按钮绑定一次touchstart或click,回调中立即调用input.focus() - 不要用
setTimeout延迟调用——iOS 要求“同一事件循环内”,微任务(Promise.resolve().then)比宏任务更稳妥 - 如果页面是通过
mshta.exe启动的 HTA,注意它不走标准浏览器策略,可直接.focus(),但 Enter 键响应需额外绑定keydown监听
真正难的不是让光标出现在时间框里,而是让这个动作在所有设备上都“有反馈”:PC 上焦点要准,Android 上键盘要跟上,iOS 上必须借用户第一次触摸来“解锁”聚焦权限。漏掉任一环节,用户就会卡在“看着输入框却点不动”的状态。



















