关闭模态后,我似乎无法模糊按钮。
$('#exampleModal').on('hidden.bs.modal', function(e){ $('button').blur(); });
我试过了上面的方法,但似乎还是不能模糊它。我几乎什么都试过了。唯一的解决办法是设置一个超时,在模型完成隐藏过渡后模糊它。有更好的解决办法吗?
zysjyyx41#
返回到触发器元素的焦点是在模态插件中使用.one()绑定设置的,不幸的是它不能被绑定。
.one()
$('#myModal').on('shown.bs.modal', function(e){ $('#myModaltrigger').one('focus', function(e){$(this).blur();}); });
其中#myModaltrigger是模态触发按钮的ID。使用.one()绑定的原因是,模糊函数只有在模态显示后才会被调用。一旦模态隐藏,并且发生了聚焦/模糊,按钮可以正常聚焦,比如通过Tab键切换到它,而不会自动模糊。请参阅this working example
#myModaltrigger
k0pti3hp2#
事实上,@cvrebert就在这里,这样做会对可访问性产生负面影响。blur()会重设焦点,因此键盘使用者(包括视力正常的键盘使用者,以及屏幕阅读器的更挑剔使用者)会有效地弹回页面的最开头。只使用键盘尝试http://jsbin.com/sukevefepo/1/:按Tab键到按钮,用ENTER/SPACE触发它,然后按Tab键到关闭按钮,ENTER/SPACE。现在,在模态关闭后,按Tab键......你会看到你的焦点回到了第一个链接上。对于任何东西,除了最简单的页面,这充其量是一个主要的烦恼,并且可能会让屏幕阅读器用户感到非常困惑)。简而言之:当前的Bootstrap行为是正确的。2我理解在模态本身关闭后,要中性化模态触发器的聚焦外观的愿望......但是使用blur()不是解决办法(除非你不太关心键盘/AT用户,也就是说)。一个更健壮的方法(我计划在Bootstrap的未来版本中研究)是,一旦用户首次使用TAB/SHIFT+TAB(表示键盘用户)导航,就在主体上动态设置一个类,否则,在这些情况下禁止使用:focus样式。
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(); }); });
aamkag614#
Anno 2022这可能对你来说已经足够了:
TL;DR
// Remove focus from whatever element is active... document.activeElement.blur?.();
说明
此处document.activeElement.blur?.():
document.activeElement.blur?.()
blur
示例方法检查是必要的,以防止在所选元素是SVGElement(例如)但没有blur method(与HTMLElement不同)的情况下出错。
4条答案
按热度按时间zysjyyx41#
返回到触发器元素的焦点是在模态插件中使用
.one()
绑定设置的,不幸的是它不能被绑定。其中
#myModaltrigger
是模态触发按钮的ID。使用.one()
绑定的原因是,模糊函数只有在模态显示后才会被调用。一旦模态隐藏,并且发生了聚焦/模糊,按钮可以正常聚焦,比如通过Tab键切换到它,而不会自动模糊。请参阅this working example
k0pti3hp2#
事实上,@cvrebert就在这里,这样做会对可访问性产生负面影响。
blur()会重设焦点,因此键盘使用者(包括视力正常的键盘使用者,以及屏幕阅读器的更挑剔使用者)会有效地弹回页面的最开头。
只使用键盘尝试http://jsbin.com/sukevefepo/1/:按Tab键到按钮,用ENTER/SPACE触发它,然后按Tab键到关闭按钮,ENTER/SPACE。现在,在模态关闭后,按Tab键......你会看到你的焦点回到了第一个链接上。对于任何东西,除了最简单的页面,这充其量是一个主要的烦恼,并且可能会让屏幕阅读器用户感到非常困惑)。
简而言之:当前的Bootstrap行为是正确的。2我理解在模态本身关闭后,要中性化模态触发器的聚焦外观的愿望......但是使用blur()不是解决办法(除非你不太关心键盘/AT用户,也就是说)。
一个更健壮的方法(我计划在Bootstrap的未来版本中研究)是,一旦用户首次使用TAB/SHIFT+TAB(表示键盘用户)导航,就在主体上动态设置一个类,否则,在这些情况下禁止使用:focus样式。
7tofc5zh3#
我的解决方案可以处理页面上的多个模态(基于Bootstrap模态示例):
aamkag614#
Anno 2022这可能对你来说已经足够了:
TL;DR
说明
此处
document.activeElement.blur?.()
:blur
是否存在示例方法检查是必要的,以防止在所选元素是SVGElement(例如)但没有blur method(与HTMLElement不同)的情况下出错。