在 Bootstrap 中关闭模态后,如何使模态触发按钮不聚焦

41ik7eoe  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(177)

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

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

我试过了上面的方法,但似乎还是不能模糊它。我几乎什么都试过了。唯一的解决办法是设置一个超时,在模型完成隐藏过渡后模糊它。有更好的解决办法吗?

zysjyyx4

zysjyyx41#

返回到触发器元素的焦点是在模态插件中使用.one()绑定设置的,不幸的是它不能被绑定。

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

其中#myModaltrigger是模态触发按钮的ID。使用.one()绑定的原因是,模糊函数只有在模态显示后才会被调用。一旦模态隐藏,并且发生了聚焦/模糊,按钮可以正常聚焦,比如通过Tab键切换到它,而不会自动模糊。
请参阅this working example

k0pti3hp

k0pti3hp2#

事实上,@cvrebert就在这里,这样做会对可访问性产生负面影响。
blur()会重设焦点,因此键盘使用者(包括视力正常的键盘使用者,以及屏幕阅读器的更挑剔使用者)会有效地弹回页面的最开头。
只使用键盘尝试http://jsbin.com/sukevefepo/1/:按Tab键到按钮,用ENTER/SPACE触发它,然后按Tab键到关闭按钮,ENTER/SPACE。现在,在模态关闭后,按Tab键......你会看到你的焦点回到了第一个链接上。对于任何东西,除了最简单的页面,这充其量是一个主要的烦恼,并且可能会让屏幕阅读器用户感到非常困惑)。
简而言之:当前的Bootstrap行为是正确的。2我理解在模态本身关闭后,要中性化模态触发器的聚焦外观的愿望......但是使用blur()不是解决办法(除非你不太关心键盘/AT用户,也就是说)。
一个更健壮的方法(我计划在Bootstrap的未来版本中研究)是,一旦用户首次使用TAB/SHIFT+TAB(表示键盘用户)导航,就在主体上动态设置一个类,否则,在这些情况下禁止使用:focus样式。

7tofc5zh

7tofc5zh3#

我的解决方案可以处理页面上的多个模态(基于Bootstrap模态示例):

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

aamkag614#

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

TL;DR

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

说明

此处document.activeElement.blur?.()

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

示例方法检查是必要的,以防止在所选元素是SVGElement(例如)但没有blur method(与HTMLElement不同)的情况下出错。

  • (我采用这种方法是为了从Angular网站的触发按钮中删除焦点(环),在该网站中,ng-Bootstrap模式对话框是通过NgRx action打开的,并且没有引用哪个元素触发了它。)*

相关问题