拦截最后一个可聚焦元素上的“模糊”事件
我正在开发一个模式组件，用于我的组织网站和数字服务(在过去的15+年中创建了大约17,000个页面，每月用户数以百万计)。可以想象，这些页面差别很大，不可能全部测试。
为了最大限度地提高这个组件的可访问性，我需要将焦点(通过选项卡键和/或虚拟游标)限制在模态上，而该模式是打开的。
我的方法是在最后一个可聚焦元素上附加一个处理程序到blur事件，该元素将焦点返回到模型中的第一个可聚焦元素。这是绝对好的，除非模式中的最后一个可聚焦元素也是页面上的最后一个可聚焦元素，在这种情况下，焦点返回到浏览器搜索栏。
几天来，我一直对此感到困惑，也找不到任何信息来说明为什么会这样。下面是一些简单的代码，说明了这个问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus trap</title>
<style>button:focus {background-color: orange;}</style>
</head>
<body>
<div id="modal">
<button id="link-1">Link-1</button>
<button id="link-2">Link-2</button>
<button id="link-3">Link-3</button>
</div>
<script>
let last_link = document.getElementById('link-3'),
first_link = document.getElementById('link-1');
last_link.addEventListener('blur', () => {
first_link.focus();
})
</script>
</body>
</html>我知道我们可以做几件事，但没有一件是理想的：
- 尝试拦截键盘事件而不是
blur--但我不愿意这样做，因为它可能会排除一些辅助技术的用户 - 在模式中创建并隐藏一个额外的可聚焦元素--我不愿意这样做，因为这感觉有点像黑客
回答 1
Stack Overflow用户
发布于 2018-10-18 15:34:34
您不能违背地址栏或本机工具栏的焦点。他们优先于你所能说的任何事情，幸运的是，这是很好的理由。
解决方案是您已经提到的两个选项之一：
- 拦截最后一个元素的选项卡，以及第一个元素的shift+tab
- 放置两个隐藏的可聚焦元素，一个在开头，一个在末尾，并且一旦隐藏的可聚焦元素获得焦点，就将焦点移到第一个或最后一个元素。
我看不出哪种辅助技术会被制表符/shift+制表符拦截所击败。如果你想到触摸界面，iOS/Android的工作方式与焦点完全不同。如果你考虑到特殊的设备，他们中的许多模拟键盘上的按键，独立于他们的动作被触发的有效方式。
如果有疑问的话，第二个看起来更像是黑客，但如果有一种特殊的方式来移动焦点，而不是通过键盘移动，那么它就会更加健壮。
https://stackoverflow.com/questions/52796192
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号