css 如何使几个元素优雅的非聚焦?

nfs0ujit  于 2023-02-06  发布在  其他
关注(0)|答案(1)|浏览(125)

我想创建一个窗口覆盖我的实际内容。当可见时,这个窗口(及其子窗口)应该是通过鼠标和Tab键获得焦点的唯一元素。任何背景元素都不应该再获得焦点。
我确信我可以使用pointer-events: none;来阻止背景中的元素接收焦点或被点击。我知道通过Tab键获得的任何焦点都可以通过在特定元素上设置tabindex="-1"来阻止。所以我想知道是否有更优雅的解决方案,而不是对每个元素单独应用负的tabindex

vaqhlq81

vaqhlq811#

你可以在你的窗口后面使用一个覆盖层来阻止鼠标交互,使用一个焦点陷阱web组件(比如https://www.webcomponents.org/element/@a11y/focus-trap)来防止键盘操作聚焦到外面。

相关问题