autofocus 属性未生效主因是浏览器仅在初始 HTML 解析时处理，动态插入、隐藏状态、inert 属性或 tabindex="-1" 均使其失效；JS 创建元素须用 focus() 方法并确保挂载后调用，兼顾用户交互与无障碍体验。
autofocus 属性为什么没让元素获得焦点
多数时候不是写错了，而是 autofocus 被浏览器主动忽略——它只在元素「可聚焦且已插入 DOM」时才生效，且不支持动态添加后补触发。
-
autofocus是布尔属性，写成<input autofocus>就行，不用赋值="true" - 如果元素初始为
display: none、visibility: hidden或父容器有inert，焦点不会获取 - 页面通过
innerHTML或appendChild()动态插入带autofocus的元素，该属性无效（浏览器只在初始 HTML 解析阶段处理） - 多个元素都写了
autofocus，只有第一个被解析到的生效（其余被忽略）
想让 JS 创建的 input 自动聚焦，该用 focus() 还是 autofocus
必须用 focus() 方法。因为 autofocus 不响应 JS 动态插入，而 focus() 可控、可延迟、可加条件判断。
- 直接调用前确保元素已挂载：比如在
setTimeout(() => input.focus(), 0)或requestAnimationFrame(() => input.focus()) - 注意浏览器限制：非用户手势（如点击、按键）触发的
focus()可能被静音（尤其在 iframe 或弹窗中） - 移动端 Safari 对自动聚焦更敏感，常需搭配
inputMode或显式用户交互后才允许唤起键盘 - 若元素被
tabindex="-1"修饰过，focus()仍有效，但autofocus不会作用于tabindex="-1"元素
autofocus 在表单提交后重置焦点的常见误操作
很多人以为给新渲染的 input 加上 autofocus 就能“恢复焦点”，但实际页面重绘后该属性已失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 服务端渲染（SSR）或客户端路由切换后，新组件里的
autofocus只在首次 HTML 加载时起作用 - React/Vue 中用
ref+useEffect或mounted钩子调用.focus()才可靠 - 避免在表单
onSubmit里直接event.preventDefault()后立刻input.focus()—— 若此时 input 尚未渲染完成（比如条件渲染），会报Cannot read property 'focus' of null - 推荐加一层存在性检查：
if (inputRef.current) inputRef.current.focus()
兼容性和无障碍注意事项
autofocus 在所有现代浏览器中都支持，但对屏幕阅读器行为不一致：部分读屏器会跳过它，或在焦点移动时中断当前播报。
立即学习“前端免费学习笔记（深入）”；
- WCAG 不禁止
autofocus，但要求不能打断用户已有操作流（比如用户刚点开页面就跳转焦点，易造成迷失） - 模态框（modal）内首个可操作元素应手动
focus()，而不是依赖autofocus—— 因为模态框本身常是动态插入的 - 如果页面顶部有跳过链接（skip link），
autofocus会覆盖其默认行为，导致键盘用户无法使用 - 测试时记得关掉浏览器自动填充建议栏（尤其是 Chrome），它有时会劫持焦点，掩盖你自己的
autofocus效果
真正麻烦的从来不是加个 autofocus，而是判断“此刻是否该聚焦”“聚焦后键盘会不会弹”“屏幕阅读器听不听得懂”。这些没法靠一个属性解决，得看上下文。
