autofocus仅在html初始解析时生效，动态插入或隐藏元素中无效；仅对可聚焦表单控件有效，spa和模态框需用focus()手动控制并注意时机与平台限制。

autofocus 属性只在 HTML 初始解析时生效

它不是 JS，不执行、不报错、不重试，浏览器只在解析原始 HTML 时“看一眼”就决定是否聚焦。动态插入的元素（比如 innerHTML 写入、Vue/React 组件挂载后、appendChild 添加）哪怕带 autofocus，也完全无效。

常见失效场景包括：

• input 被包裹在 display: none 或 visibility: hidden 的父容器中 → 浏览器跳过该元素
• input disabled autofocus 或 input type="hidden" autofocus → 原生不可聚焦，属性被忽略
• 多个 autofocus 同时存在 → 只有第一个被 HTML 解析器读到的可能生效，其余静默丢弃
• iOS Safari 中几乎总是静默忽略 → 这是平台策略，不是 bug，也不报错

哪些元素能用 autofocus？哪些不能？

autofocus 仅对原生可聚焦且处于可交互状态的表单控件有效：

• ✅ <input type="text">、<input type="search">、<input type="email">、<textarea></textarea>、<select></select>、<button></button>
• ❌ <input type="hidden">、<input type="checkbox">、<div tabindex="0"> → 即使加了 <code>tabindex，autofocus 本身也不起作用
• ⚠️ <input type="password"> 在部分 Android 浏览器中会被跳过，不保证聚焦

写法必须是布尔属性：autofocus，不是 autofocus="true"，更不是 data-autofocus 或 el.setAttribute('autofocus', '') —— 后者毫无效果。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载

SPA 和模态框里 autofocus 失效，怎么补救？

React/Vue/Angular 中，路由切换后新渲染的输入框不会触发 autofocus；JS 动态显示的模态框（如 modal.style.display = 'block'）同理。此时必须用 focus() 手动控制，但要注意时机和条件：

• 确保元素已挂载且可见：检查 offsetParent !== null 或用 getComputedStyle(input).display !== 'none'
• 避免覆盖用户操作：调用前加判断 if (document.activeElement !== input) input.focus()
• 移动端 iOS 必须在用户手势上下文内调用：比如按钮点击回调中立即或微任务里执行 input.focus()，否则被静默拒绝
• 推荐时机：Vue 的 onMounted + nextTick，React 的 useEffect + setTimeout(() => input.focus(), 0) 或 requestAnimationFrame

移动端软键盘弹不出？焦点和键盘是两回事

即使 input.focus() 成功，iOS Safari 和部分 Android 浏览器仍可能不弹软键盘——聚焦 ≠ 弹键盘。尤其在无用户手势、页面刚加载、或模态框未完全渲染完成时：

• Android 上可尝试聚焦后立刻调用 input.select() 提高键盘触发率
• iOS 必须依赖用户点击/触摸事件触发后的同步或微任务调用，否则一律失败
• 模态框中建议配合 input.scrollIntoView({ block: 'nearest' })，防止键盘遮挡输入框
• 别在 DOMContentLoaded 里直接对动态模态框调用 focus() —— 此时 DOM 存在，但元素很可能还没 visible 或没挂载到可视区域

真正容易被忽略的是：焦点管理不是“让光标出现”，而是协调 DOM 状态、可访问性语义、平台策略和用户当前意图。一个没做 activeElement 判断的 focus()，可能在用户刚点完密码框时强行切走焦点，体验反而更差。