如何专注于打开和模态的触发元素，一旦保存内容，整个页面就会被销毁并再次呈现

Posted 2023-03-12

【中文标题】如何专注于打开和模态的触发元素，一旦保存内容，整个页面就会被销毁并再次呈现

【英文标题】：How to focus on the trigger element which opens and modal and once the content is saved the whole page destroyed and rendered again

【发布时间】：2017-02-15 05:23:29

【问题描述】：

这更多是一个架构问题，所以在网页中我有一个编辑按钮，当我允许我编辑记录时。只要我按下编辑按钮，就会打开一个模式，我会更改一些记录信息并点击保存。

焦点返回 toast 的 (X) 关闭按钮（保存确认）一秒钟，甚至在 toast 消失之前焦点返回到浏览器，因为保存刷新页面并且 dom 被销毁并再次创建。

我们期望做的是，一旦我们点击模态中的保存按钮，焦点应该转到 toast (x) 关闭按钮并等待确认对话框 (toast) 消失，然后再次返回到编辑按钮。

---

所以有2个问题需要解决

当我们在模态中点击保存按钮后，如何在 dom 被销毁并再次创建时将焦点设置在编辑按钮（触发器）上，因为在此之前有几个按钮，比如新建、查看然后编辑。如何专门设置触发元素的焦点？

如何创建焦点堆栈，我们可以指定焦点应该先到 toast，然后再到触发器，即使 dom 被销毁并再次创建（这可能）？

---

当我说“dom 被销毁并再次创建”时，是不是要部分替换 DOM 内容？还是重新加载整个页面？

只是这些触发按钮（新建、编辑、查看）在其中被销毁并再次创建的标题面板。所以只有部分 dom 被销毁并再次创建

【参考方案1】：

toast 消息通常是暂时的，会自行消失。它应该不显眼，以便很容易被忽略。如果您有一个 X 关闭按钮，并且您希望用户单击它（或按 ESC）来关闭 toast 消息，那么您确实有一个模态对话框而不是 toast 消息。

在我使用过的允许编辑和保存的网站上，我发现只需在页面上显示一条简单的保存消息就足够了。保存消息可以是aria-live 区域，以便屏幕阅读器用户可以阅读该消息。如果我开始编辑其他字段，保存消息通常会消失。

如果在重新创建 DOM 后必须强制焦点返回某个位置，则必须保存原来的位置（cookie），然后获取保存点并调用 focus() 方法。