autofocus仅在页面首次加载且元素存在于初始html时生效；动态插入、框架组件、隐藏元素、form.reset()后均失效，须用js主动调用.focus()并注意ssr和移动端兼容性。
autofocus 属性只在页面首次加载、且元素存在于初始 HTML 中时才可能生效；绝大多数“没反应”的情况，是因为它根本没被浏览器处理——不是你写错了，是它压根不工作。
autofocus 在动态插入或框架组件中必然失效
浏览器只在 HTML 解析阶段扫描并执行 autofocus，JS 后续用 innerHTML、appendChild() 或 Vue/React 渲染出来的 <input autofocus>，该属性会被完全忽略。
- ❌
document.getElementById('form').innerHTML = '<input type="text" autofocus>'→ 无效 - ❌ React 组件里写
<input autofocus>（即使首字母大写）→ SSR 或挂载延迟时大概率不聚焦 - ✅ 正确做法：用
ref+useEffect（React）或mounted钩子（Vue）调用.focus() - ⚠️ 注意：SSR 场景下直接调用
.focus()会报document is not defined，需包裹if (typeof window !== 'undefined')
autofocus 不触发 focus 事件，也不保证键盘弹出
它只是让浏览器“把焦点设过去”，但不会派发 focus 事件（旧版 Safari 除外），更不会强制唤起软键盘——尤其在 iOS Safari 中，autofocus 几乎总是被静默丢弃。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ❌ 依赖
input.addEventListener('focus', handler)捕获 autofocus 行为 → 大概率收不到 - ✅ 若需监听，必须手动调用
el.focus()，它会触发focus事件 - ✅ 移动端安全聚焦：绑定在用户手势后（如按钮点击），再立即调用
.focus() - ⚠️
.focus({ preventScroll: true })可防止页面滚动，autofocus 没这个能力
多个 autofocus 元素或隐藏状态导致行为不可控
浏览器只对第一个解析到的 autofocus 元素生效；若元素被 display: none、visibility: hidden、inert 或 tabindex="-1" 包裹，autofocus 直接跳过。
- ❌
<div style="display:none"><input autofocus></div>→ 无效 - ❌
<input autofocus tabindex="-1">→ 无效（tabindex="-1"排除自动聚焦） - ✅ 替代隐藏方案：用
opacity: 0; pointer-events: none;或绝对定位移出视口 - ✅ 自定义元素支持 autofocus：需加
tabindex="0"，但会进入 Tab 流，需权衡键盘导航体验
form.reset() 后 autofocus 不恢复，必须手动补焦
调用 form.reset() 会清空值并移除当前焦点，且不会重新触发 autofocus 逻辑——哪怕那个 input 原本就带 autofocus。
- ❌
form.reset(); // 之后光标不会回到 autofocus 输入框 - ✅ 正确做法：重置后立刻
inputEl.focus()，并加防重判断if (document.activeElement !== inputEl) - ✅ 更实用的替代：结合
checkValidity()，验证失败时聚焦首个:invalid元素，比依赖 autofocus 更可靠
真正容易被忽略的是：autofocus 是个“一次性提示符”，不是焦点控制系统。它不响应状态变化、不处理条件逻辑、不兼容动态场景——所有需要稳定聚焦的地方，最终都得靠 JS 主动控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
