Skip to content

焦点管理与对话框:练习答案 ​

答案用于核对输入契约、运行日志、失败分类和替代方案;不要把答案实现当作正文的前置。

dialog、modal 与返回焦点 ​

可核对实现:打开前保存 document.activeElement,调用 showModal() 后把焦点放到标题输入;监听 close 并恢复保存的元素。Escape、取消和提交都必须触发同一套恢复逻辑。

预期结果:Tab 只能在模态层内移动;Escape 关闭后焦点回到“编辑标题”按钮。使用 show() 时背景仍可交互,不能把它当作模态替代。

dialog、modal 与返回焦点 ​

答案必须保留本节输入、操作和可观察结果。先运行成功路径,再运行一个反例;

text
输入:第一次执行 → 改变一个条件 → 取消或卸载
预期:状态转移与正文规则一致;取消后没有迟到写入;失败保留可诊断原因

若结果不同,优先检查资源所有权、执行时机和宿主前提,而不是只改最终 UI。

inert 与背景隔离 ​

答案必须保留本节输入、操作和可观察结果。先运行成功路径,再运行一个反例;

text
输入:第一次执行 → 改变一个条件 → 取消或卸载
预期:状态转移与正文规则一致;取消后没有迟到写入;失败保留可诊断原因

若结果不同,优先检查资源所有权、执行时机和宿主前提,而不是只改最终 UI。

focus-visible 与可见焦点 ​

答案必须保留本节输入、操作和可观察结果。先运行成功路径,再运行一个反例;

text
输入:第一次执行 → 改变一个条件 → 取消或卸载
预期:状态转移与正文规则一致;取消后没有迟到写入;失败保留可诊断原因

若结果不同,优先检查资源所有权、执行时机和宿主前提,而不是只改最终 UI。

用心记录每一步成长