Safari浏览器为何会忽略部分Input输入框的自动聚焦属性？

Safari iOS强制要求input聚焦必须由用户手势同步触发，autofocus、DOMContentLoaded、setTimeout等异步方式均无效；可靠方案是在点击事件处理器内同步调用focus()或用touchstart一次性监听。

当你在Safari浏览器（尤其是iOS版）中给标签添加autofocus属性，或在JavaScript中调用focus()方法，却发现键盘不弹出、光标不出现时，这不是代码写错了，也不是DOM没加载完，而是Safari主动拦截了这次聚焦请求——它只认“用户亲手点过”的那一刻。

根本原因：Safari强制执行“用户手势”验证

iOS Safari和WKWebView内核要求：任何触发软键盘的行为（即input获得焦点），必须发生在由用户真实触摸/点击事件直接驱动的同步执行上下文中。页面加载、定时器回调、Vue的mounted钩子、Promise.then、甚至$nextTick的微任务，只要脱离了这个“用户刚点下按钮”的原始调用栈，就会被静默拒绝。

这种限制不是Bug，是苹果HIG（人机界面指南）明确倡导的设计原则：防止页面未经允许突然弹出键盘，遮挡内容、打断浏览、引发意外滚动。

哪些操作一定会被忽略？

方法一：HTML原生autofocus属性
在iOS Safari中完全无效，无论页面结构多简单、input是否在首屏、是否已渲染完成。

方法二：页面加载完成即调用focus()
document.addEventListener('DOMContentLoaded', () => { input.focus(); });
这属于“非用户触发”，系统直接丢弃调用，控制台无报错，但键盘绝不弹起。

方法三：异步延迟后聚焦
setTimeout(() => input.focus(), 10);
哪怕只延迟1毫秒，也已进入新的宏任务队列，失去用户手势上下文，聚焦失败。

为什么Vue的$nextTick有时能成功？

第一步：确认触发时机必须绑定在用户交互事件内
例如@click="openModal"中，先设showModal = true，再调用this.$nextTick(() => this.$refs.input.focus())。

第二步：理解$nextTick的“灰色地带”
$nextTick将回调推入微任务队列，在Vue 13+版本中，Safari对“紧随用户点击之后的微任务中聚焦”容忍度提高；但在iOS 11–12中仍可能失败——【它不是稳定解，只是高概率解】。

第三步：避免嵌套异步
不要在$nextTick里再套setTimeout，也不要在API响应后才调$nextTick，否则手势链彻底断裂。

真正可靠的聚焦路径

方法1：点击事件处理器内同步聚焦
确保DOM已存在（如input未被v-if移除），且focus()语句与事件处理函数处于同一同步执行流：
handleClick() { this.showInput = true; // 此时input已挂载 this.$refs.input.focus(); // 同步调用，100%生效 }

方法2：为动态插入的input绑定touchstart监听
当input通过v-html或innerHTML注入后，立即为其添加一次性的touchstart监听：
input.addEventListener('touchstart', function once() { input.focus(); input.removeEventListener('touchstart', once); }, { once: true });
这相当于把“用户点这里”的意图，提前预埋到元素身上。

方法3：原生click()模拟（仅限可交互元素）
若input本身不可点（如被disabled或CSS禁用），可改聚焦其父容器中的button或label，并设置for属性关联input，利用label点击自动聚焦的原生行为。