Twitter bootstrap 在引导中关闭模式后，如何解除模式触发器按钮的焦点

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

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

---

我试过上面的方法，但仍然没有模糊。我几乎什么都试过了。唯一的解决方案是设置一个超时，并在模型完成隐藏过渡后使其模糊。有更好的解决方案吗？

返回到触发器元素的焦点是使用

.one（）

绑定在模态插件中设置的，不幸的是无法解除绑定。好消息是我们可以做到这一点：

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

其中，

#myModaltrigger

是模式触发按钮的ID。使用

.one（）

绑定的原因是，只有在显示模式后才会调用要模糊的函数。一旦它隐藏，并且发生聚焦/模糊，按钮就可以正常聚焦，就像通过对其进行切换一样，而不会自动模糊

---

请看

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

blur（）重置焦点，这样键盘用户（既有视力良好的键盘用户，也有更挑剔的屏幕阅读器用户）可以有效地返回到页面的最开始

试着用键盘：按TAB键，用ENTER/SPACE触发，然后按TAB键，按close键，输入/SPACE。现在，在模态关闭之后，TAB…你会看到你的焦点回到了第一个链接上。对于除了最简单的页面以外的任何页面，这充其量都是一个主要的麻烦，并且可能会让屏幕阅读器用户大为迷失方向）

简而言之：当前引导行为是正确的。我理解，一旦模态本身关闭，就需要对模态触发器的聚焦外观进行中性化…但使用blur（）并不是答案（除非您对键盘/AT用户不太关心）

---

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

我的解决方案，该解决方案在页面上使用多个模态（基于）:

---

我不清楚您要从哪个按钮上移除焦点，请参阅。当模式关闭时，焦点不在用于关闭它的任何按钮上。您能澄清一下吗？如果您能在JS Fiddle或Bootply上模拟您的代码，这样我们就可以看到您的代码中是否有任何东西可能会阻止它。@Ted您在哪个浏览器中运行？当我使用Chrome在我的工作机器上运行它时，启动模式的按钮肯定是聚焦的。啊哈------我聚焦在关闭按钮上。没有双关语。不用担心，这就是评论的目的我将询问者的JQ插入你的引导层，这绝对不会导致按钮失去焦点。哎呀，这真是太棒了。谢谢我想知道为什么在stackoverflow中找不到这样的答案。注意：这样做会损害网页的可访问性。@cvrebert不是真的。它只在关闭模式后从触发器按钮上移除焦点。在那之后，按钮可以毫无问题地被按下，并且不会自动取消对焦。这就是

.one（）

binding.AIUI的要点，问题是它会让使用辅助技术的用户迷失方向。模糊按钮可能会使他们失去在页面上的位置，因此他们无法在打开模式对话框之前选择离开的位置。@cvrebert我明白你的意思。这更适合作为注释，而不是答案，因为它不能提供问题的答案。欢迎来到StackOverflow

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