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 就能“恢复焦点”，但实际页面重绘后该属性已失效。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 服务端渲染（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，而是判断“此刻是否该聚焦”“聚焦后键盘会不会弹”“屏幕阅读器听不听得懂”。这些没法靠一个属性解决，得看上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！