### [dialog 里 autofocus 失效的因果链](https://www.huociguo.com/article/1871)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 🎯 弹窗打开后期望首个输入框自动聚焦，写了 却没反应。顺着因果链查下去，原因清晰。因： 只在页面初始解析时生效…

🎯 弹窗打开后期望首个输入框自动聚焦，写了 `autofocus` 却没反应。顺着因果链查下去，原因清晰。

因：`autofocus` 只在页面初始解析时生效一次，`dialog` 是后续 `showModal()` 打开的，时机不对，属性被忽略。果：焦点停在 dialog 本身或 body，输入框没拿到焦点。

![dialog 光标示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6986458.jpeg)

弹窗内焦点，需手动接管

链路续接：在 `showModal()` 之后监听 `focusin`，手动 `el.focus()`。⚠️ iOS Safari 要求聚焦发生在用户手势同步流内，异步延迟会失败，需紧贴打开动作执行。

补完：给弹窗补 `aria-labelledby`、`aria-modal`，焦点陷阱兜住 Tab 循环。其余细节，关闭时把焦点还给触发按钮，体验才完整。

**Tags:** aria 属性补全, dialog autofocus, focusin 事件, iOS Safari 手势, showModal 焦点

**Categories:** HTML5

---