HTML中使用autofocus属性自动聚焦的行为规则与无障碍影响-html教程-PHP中文网

autofocus仅在html初始解析时生效，动态插入无效；仅对原生可聚焦元素（如input、textarea等）起作用，且ios safari和屏幕阅读器存在兼容限制。

html中使用autofocus属性自动聚焦的行为规则与无障碍影响

浏览器只在页面首次加载、HTML 文本被解析成 DOM 的那一瞬间检查 autofocus 属性。这意味着：

用 innerHTML、appendChild() 或框架（如 React/Vue）渲染后才出现的元素，即使带 autofocus，也完全不会触发聚焦
服务端渲染（SSR）后客户端 hydrate 阶段，autofocus 已“过期”，不会重试
setAttribute('autofocus', '') 或 el.autofocus = true 这类 JS 操作对已挂载元素无效
唯一可靠场景：纯静态 HTML 或 SSR 输出中，目标元素从一开始就在 DOM 树里，且未被 display: none、inert 或 tabindex="-1" 阻断

autofocus 不是万能开关，它只对「原生可聚焦且处于可用状态」的元素起作用：

Article To Html

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

下载

支持的元素：input（type 不能是 hidden、disabled 或 readonly）、textarea、select、button
contenteditable="true" 的 div 不认 autofocus，必须手动调用 .focus()
div 或 span 加了 autofocus 但没设 tabindex="0"，等于白写
多个元素都写了 autofocus，浏览器只聚焦 DOM 中第一个被解析到的，其余被静默忽略

iOS Safari 几乎无视 autofocus，这不是 bug，而是明确的设计限制；同时，自动聚焦对屏幕阅读器用户可能造成信息流中断：

iOS Safari 在页面自动加载、iframe 内、或后台切前台时，会直接跳过 autofocus，必须搭配用户手势（如点击按钮）后调用 .focus() 才能唤起键盘
屏幕阅读器（如 VoiceOver）可能在播报完 <h1></h1> 前就跳到输入框，导致用户错过关键上下文
WCAG 不禁止 autofocus，但要求它不能打断已有操作流——比如登录页自动聚焦密码框，就违反「用户控制焦点」原则
若页面顶部有 banner 或导航栏，autofocus 可能触发意外滚动，需配合 scroll-margin-top 调整定位

声明式 autofocus 简单，但可控性差；命令式 .focus() 灵活，但容易掉坑：

适合 autofocus 的场景：独立登录页、搜索结果页顶部搜索框、模态框（modal）首次打开——这些场景意图明确、无干扰、非动态生成
必须用 .focus() 的场景：SPA 路由切换后聚焦、条件渲染组件挂载后、表单提交失败重置焦点、iOS 兼容兜底
调用 .focus() 前务必检查：if (el && document.activeElement !== el) el.focus()，避免覆盖用户当前输入
注意时机：React 用 useEffect(() => { ref.current?.focus() }, [])；Vue 用 onMounted(() => inputRef.value?.focus())；纯 JS 推荐 requestAnimationFrame(() => el.focus()) 而非 setTimeout