在 bootstrap 中关闭模态后如何取消模态触发按钮的焦点

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() 绑定的原因是只有在显示模式后才会调用要模糊的函数。一旦它隐藏，并且 focus/blur 发生，按钮就可以正常聚焦，就像通过跳转到它一样，不会自动模糊。

见this working example

Answer 2

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

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

尝试 http://jsbin.com/sukevefepo/1/ 只使用键盘：TAB 到按钮，用 ENTER/SPACE 触发它，然后 TAB 到关闭按钮，ENTER/SPACE。现在，在关闭模式后，按 TAB...您会发现您的焦点又回到了第一个 link。除了最简单的页面之外，这充其量只是一个主要的烦恼，并且可能会让屏幕阅读器用户迷失方向）。

简而言之：当前 Bootstrap 行为是正确的。我理解一旦模态本身关闭就希望消除模态触发器的聚焦外观......但是使用 blur() 不是答案（除非你不关心 keyboard/AT 用户，也就是说）。

我计划在 Bootstrap 的未来版本中研究一种更强大的方法，即在用户首次使用 [=24= 进行导航时在 body 上动态设置 class ]+TAB（表示键盘用户），否则在这些情况下抑制 :focus 样式。

Answer 3

我在页面上使用多个模式的解决方案（基于Bootstrap modal examples）：

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

在 bootstrap 中关闭模态后如何取消模态触发按钮的焦点

How can I unfocus the modal trigger button after closing the modal in bootstrap

modal-dialog

twitter-bootstrap

twitter-bootstrap-3