如何在关闭Bootstrap模态框后取消焦点模态触发按钮？

Question

在关闭模态框后，我似乎无法使按钮模糊。

$('#exampleModal').on('hidden.bs.modal', function(e){
        $('button').blur();
    });

我尝试了上述方法，但似乎仍无法模糊它。我已经尝试了几乎所有的方法。唯一的解决办法是在模态完成隐藏转换后设置一个延迟并模糊它。是否有更好的解决方案？

- holyxiaoxin

---

我不清楚你想要从哪个按钮中移除焦点，请参考这个示例bootply。当模态框关闭时，焦点不在任何用于关闭它的按钮上。你能澄清一下吗？ - Ted

如果您能在JS Fiddle或Bootply上模拟您的代码，可能会有帮助，这样我们就可以看到是否有任何代码阻止它的执行。 - MattD

@Ted 你在用什么浏览器？当我在我的工作电脑上使用Chrome运行它时，启动模态框的按钮肯定是聚焦的。 - MattD

啊——我一直在关注关闭按钮。没有双关语的意思。 - Ted

没关系，这就是注释的作用。 :D 我将提问者的JQ插入了你的Bootply中，它绝对不会导致按钮失去焦点。http://www.bootply.com/eC1cXzeogY - MattD

Answer 1

使用.one()绑定在模态插件中将焦点重新设置到触发元素上，但不幸的是这个绑定无法解除。好消息是我们可以这样做：

$('#myModal').on('shown.bs.modal', function(e){
    $('#myModaltrigger').one('focus', function(e){$(this).blur();});
});

其中#myModaltrigger是模态框触发按钮的ID。使用.one()绑定的原因是仅在显示模态框后才调用模糊函数。一旦隐藏，焦点/模糊发生，按钮就可以像通过标签切换一样正常聚焦，而不会自动模糊。

请参见这个工作示例

- Ted

---

哎呀，这个完美地运行了。谢谢！我一直在想为什么在Stack Overflow上找不到像这样的答案。 - holyxiaoxin

注意：这样做会损害您网页的可访问性。 - cvrebert

@cvrebert并不完全是这样。它只是在模态框关闭后从触发按钮中移除焦点。之后，该按钮可以轻松地进行制表，而且不会失去焦点。这就是.one()绑定的目的。 - Ted

据我所知，问题在于它会使使用辅助技术的用户感到迷失。模糊按钮可能会导致他们失去在页面上的位置，因此他们无法从打开模态框之前留下的位置继续进行。 - cvrebert

@cvrebert 我明白你的意思。 - Ted

Answer 2

事实上，@cvrebert是正确的，这样做对可访问性产生了负面影响。

blur()会重置焦点，因此键盘用户（包括有视力的键盘用户和更关键的屏幕阅读器用户）实际上被弹回到页面的开头。

请尝试使用键盘访问http://jsbin.com/sukevefepo/1/：使用TAB键移动到按钮，使用ENTER/SPACE触发它，然后使用TAB键移动到关闭按钮，再次使用ENTER/SPACE。现在，在模态框关闭后，使用TAB键...你会发现你的焦点回到了第一个链接。对于除最简单的页面之外的任何页面，这都是一个很大的麻烦，对于屏幕阅读器用户来说可能会非常令人迷惑。

简而言之：当前Bootstrap行为是正确的。我理解希望在模态框本身关闭后削弱模态框触发器的聚焦外观的愿望...但是使用blur()不是答案（除非你很少关心键盘/辅助技术用户）。

一种更为稳健的方法，我计划在未来的Bootstrap版本中进行研究，即在用户首次使用TAB/SHIFT+TAB进行导航时在body上动态设置一个类（表示键盘用户），并在其他情况下抑制:focus样式。

- Patrick H. Lauke

---

这应该更适合作为评论，而不是答案，因为它并没有提供问题的答案。欢迎来到StackOverflow。 - Ted

Answer 3

我的解决方案适用于页面上的多个模态框（基于Bootstrap模态框示例）：

$('.modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    button.one('focus', function (event) {
        $(this).blur();
    });
});

- Peter Krupenya

Answer 4

在2022年，这可能已经足够了：

简而言之

// Remove focus from whatever element is active...
document.activeElement.blur?.();

解释

这里的document.activeElement.blur?.()：

• 获取网页上具有焦点的元素，
• 检查实例方法blur是否存在
• 如果存在，则调用它。 （然后将焦点从该元素移除并应用于body元素）。

实例方法检查是必要的，以防所选元素是SVGElement（例如），它没有blur方法，而不像HTMLElement那样。

（我采取了这种方式来从Angular网站中删除焦点（环）从触发按钮，在该网站中，通过NgRx action打开了ng-Bootstrap模态对话框，并且没有参考哪个元素触发了它。）

- BlueTabasco