直接调用 focus() 常失败，需确保元素已渲染、避开浏览器自动聚焦限制、聚焦后滚动至可视区，并可用 blur() 主动移除焦点收起软键盘。

直接调用 focus() 方法就能让元素获得焦点，但实际用起来常失败——不是代码写错了，而是时机、条件或浏览器限制没处理好。

确保元素已就绪再聚焦

元素还没渲染到页面上就调用 focus()，等于对空气发号施令，必然无效。关键是要等 DOM 真正可用：

• 把脚本放在 </body> 前，或监听 DOMContentLoaded 事件
• 在 Vue/React 中，应在 mounted 或 useEffect 完成后调用
• 动态插入的元素（比如通过 innerHTML 添加），需在插入后立即聚焦，不能依赖页面加载完成事件
• 检查 element.offsetParent 是否为 null，避免对隐藏或未渲染元素调用

绕过浏览器自动聚焦限制

Chrome、Safari（尤其是移动端）会拦截“无用户手势触发”的 focus()，这是防骚扰的强制策略：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 允许：点击按钮后同步调用 input.focus()
• 禁止：页面加载完用 setTimeout 延迟聚焦，或在 fetch 回调里直接聚焦
• 变通方案：监听首次 mousedown 或 keydown，设一个标记位，后续聚焦操作就可放开

聚焦时主动滚动到可视区域

聚焦后元素被遮挡或在视口外，用户看不到，体验断层。建议配合 scrollIntoView()：

立即学习“Java免费学习笔记（深入）”；

• 简单写法：element.focus(); element.scrollIntoView({ behavior: 'smooth' });
• 更稳妥：在 focus 事件回调中判断 document.activeElement === element 再滚动，避免重复触发
• 移动端尤其重要——软键盘弹出可能把输入框顶出视野，滚动能大幅降低用户操作成本

用 blur() 主动移除焦点

提交表单或关闭弹窗后，让输入框失焦不只是视觉清理，还能收起手机软键盘：

• 调用 element.blur() 即可，它不冒泡，不影响父级事件流
• 配合 blur 事件监听，统一做校验、保存或状态重置
• 若想“把焦点移到页面外”，可临时聚焦一个 tabindex="-1" 的隐藏 input，再 blur()，比 document.body.focus() 兼容性更好