在引导程序中关闭模态后，如何取消对模态触发按钮的关注

Question

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

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

我试过上面的，但它似乎仍然没有模糊。我几乎什么都试过了。唯一的解决方案是设置一个超时，并在模型完成隐藏转换后对其进行模糊处理。有更好的解决方案吗？

Answer 1

返回触发器元素的焦点是在模式插件中使用.one()绑定设置的，不幸的是，该绑定无法解除绑定。好消息是我们可以做到这一点：

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

其中#myModaltrigger是模式触发按钮的ID。使用.one()绑定的原因是，只有在显示模态之后才会调用要模糊的函数。一旦它隐藏起来，焦点/模糊发生，按钮就可以正常聚焦，就像通过选项卡切换到它一样，而不会自动模糊。

请参阅此工作示例

Answer 2

事实上，@cvrebert就在这里，这样做会对可访问性产生负面影响。

blur（）重置焦点，因此键盘用户（既有视力正常的键盘用户，也有更挑剔的屏幕阅读器用户）可以有效地反弹到页面的开头。

尝试http://jsbin.com/sukevefepo/1/只需使用键盘：按TAB键到按钮，按ENTR/SPACE键触发，然后按TAB键关闭按钮，按ENTER键/SPACE键。现在，在关闭模态之后，按TAB…，您可以看到您的注意力又回到了第一个链接上。对于除了最简单的页面之外的任何内容，这充其量都是一个主要的烦恼，并且可能会让屏幕阅读器用户非常困惑）。

简而言之：当前的引导行为是正确的。我理解一旦模态本身被关闭，就希望消除模态触发器的集中外观。。。但使用blur（）并不是答案（除非你不太关心键盘/AT用户）。

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

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();
    });
});

Answer 4

Anno 2022这对你来说可能已经足够了：

TL；DR

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

解释

此处document.activeElement.blur?.():

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

实例方法检查是必要的，以防止在所选元素是没有模糊方法的SVGElement（例如）的情况下出错，而HTMLElement有模糊方法。

（我采取这条路线是为了从Angular网站的触发按钮上移除焦点（环），在该网站上，通过NgRx操作打开了ng Bootstrap模式对话框，但没有提及触发它的元素。）