在关闭模态框后,我似乎无法使按钮模糊。
$('#exampleModal').on('hidden.bs.modal', function(e){
$('button').blur();
});
我尝试了上述方法,但似乎仍无法模糊它。我已经尝试了几乎所有的方法。唯一的解决办法是在模态完成隐藏转换后设置一个延迟并模糊它。是否有更好的解决方案?
在关闭模态框后,我似乎无法使按钮模糊。
$('#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()
绑定的原因是仅在显示模态框后才调用模糊函数。一旦隐藏,焦点/模糊发生,按钮就可以像通过标签切换一样正常聚焦,而不会自动模糊。
请参见这个工作示例
.one()
绑定的目的。 - Ted事实上,@cvrebert是正确的,这样做对可访问性产生了负面影响。
blur()会重置焦点,因此键盘用户(包括有视力的键盘用户和更关键的屏幕阅读器用户)实际上被弹回到页面的开头。
请尝试使用键盘访问http://jsbin.com/sukevefepo/1/:使用TAB键移动到按钮,使用ENTER/SPACE触发它,然后使用TAB键移动到关闭按钮,再次使用ENTER/SPACE。现在,在模态框关闭后,使用TAB键...你会发现你的焦点回到了第一个链接。对于除最简单的页面之外的任何页面,这都是一个很大的麻烦,对于屏幕阅读器用户来说可能会非常令人迷惑。
简而言之:当前Bootstrap行为是正确的。我理解希望在模态框本身关闭后削弱模态框触发器的聚焦外观的愿望...但是使用blur()不是答案(除非你很少关心键盘/辅助技术用户)。
一种更为稳健的方法,我计划在未来的Bootstrap版本中进行研究,即在用户首次使用TAB/SHIFT+TAB进行导航时在body上动态设置一个类(表示键盘用户),并在其他情况下抑制:focus样式。
我的解决方案适用于页面上的多个模态框(基于Bootstrap模态框示例):
$('.modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
button.one('focus', function (event) {
$(this).blur();
});
});
在2022年,这可能已经足够了:
简而言之
// Remove focus from whatever element is active...
document.activeElement.blur?.();
解释
这里的document.activeElement.blur?.()
:
blur
是否存在实例方法检查是必要的,以防所选元素是SVGElement(例如),它没有blur方法,而不像HTMLElement那样。
(我采取了这种方式来从Angular网站中删除焦点(环)从触发按钮,在该网站中,通过NgRx action打开了ng-Bootstrap模态对话框,并且没有参考哪个元素触发了它。)