autofocus 仅在元素初始渲染且处于可见文档流中时生效，动态插入、隐藏容器或框架重渲染会导致失效，需结合 DOM 状态与时机手动聚焦。
autofocus 属性被 JavaScript 覆盖或延迟执行
页面加载时 autofocus 会触发，但如果后续 JS 手动调用 blur() 或给其他元素调用了 focus()，焦点就会立刻丢失。常见于表单初始化、框架（如 Vue/React）的 mounted 钩子中主动聚焦，或第三方库（如日期选择器）自动绑定 focus 事件。
解决方法是让 JS 的聚焦逻辑「让步」于原生 autofocus，或延迟到浏览器完成默认行为后再操作：
- 检查是否有
document.getElementById('xxx').focus()或类似调用，临时注释掉测试 - 若必须用 JS 控制，改用
setTimeout(() => input.focus(), 0)或监听DOMContentLoaded后再聚焦 - 在 Vue 中避免在
mounted立即this.$refs.input.focus()；可加nextTick包裹
autofocus 在模态框或动态插入的 HTML 中失效
autofocus 只在元素初始渲染且位于 document 流中时生效。如果元素是通过 JS 动态插入（如 innerHTML、appendChild）、或在隐藏的 display: none 容器里（包括未打开的模态框），浏览器会忽略该属性。
此时必须手动聚焦：
立即学习“前端免费学习笔记（深入）”；
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 确保元素已插入 DOM 且父容器可见（
offsetParent !== null） - 插入后立即调用
input.focus()，不要依赖autofocus - 对模态框，建议在
show动画结束回调中聚焦，例如 Bootstrap 的shown.bs.modal事件
const modal = document.getElementById('loginModal');
modal.addEventListener('shown.bs.modal', () => {
document.getElementById('username').focus();
});
浏览器兼容性与多 autofocus 元素冲突
HTML5 规范明确：同一页面中多个 autofocus 属性仅第一个有效；且 Safari（尤其旧版 iOS）对 autofocus 支持不稳定，可能完全不触发。
更隐蔽的问题是：某些移动端浏览器（如微信内置 WebView）会禁用自动聚焦以防止软键盘意外弹出——这是主动策略，不是 bug。
- 始终只在**一个**输入框上使用
autofocus，避免多个同时存在 - 移动端优先考虑「用户触发后聚焦」，例如点击登录按钮再聚焦账号框，而非页面一开就聚焦
- 用
document.activeElement检查当前焦点是否符合预期，便于调试
表单重置或 Vue/React 组件重新渲染导致焦点丢失
在响应式框架中，组件 re-render 或表单 reset() 会销毁并重建 DOM 节点，autofocus 不会二次生效——它只作用于初始解析阶段。
这不是浏览器问题，而是 DOM 生命周期使然：
- Vue 中可用
v-focus自定义指令，在mounted和updated都尝试聚焦 - React 中用
useEffect+ref，并在依赖项包含「是否应聚焦」的状态变量 - 原生 JS 场景下，监听表单
reset事件后手动调用input.focus()
form.addEventListener('reset', () => {
setTimeout(() => document.getElementById('search').focus(), 10);
});
autofocus 不是“保证聚焦”的开关，它只是“请求浏览器在合适时机聚焦”。真正可靠的聚焦，永远需要结合 DOM 状态、渲染时机和平台限制做兜底处理。 
