火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

dialog 里 autofocus 失效的因果链

发布于 1天前
6

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

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

dialog 光标示意
弹窗内焦点,需手动接管

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

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

常见问题(FAQ)

autofocus 为何失效
只在初始解析生效一次,dialog 是后续打开的,时机已过,属性被忽略。
怎么正确聚焦
showModal 之后监听 focusin,再手动调用 el.focus() 指定目标。
iOS Safari 要注意
聚焦须在用户手势同步流内执行,异步延迟调用会失败。
要补 aria 吗
补 aria-labelledby 与 aria-modal,提升读屏对弹窗的识别。
关闭时要处理焦点吗
要。把焦点还给触发按钮,避免焦点丢失到不可见区域。
aria 属性补全dialog autofocusfocusin 事件iOS Safari 手势showModal 焦点
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1