在 Bootstrap 模式处于活动状态时禁用 Tab 键聚焦 [英] Disable tab key focusing while Bootstrap modal is active

问题描述

在 Bootstrap 3 中，我有一个模式窗口，当您单击 .btn 链接时会弹出该窗口.

In Bootstrap 3, I have a modal window that pops up when you click a .btn link.

当它处于活动状态时，用户仍然可以按 Tab 来关注背景中的链接和按钮，其中一些具有工具提示等.当这些链接被聚焦时，它们的工具提示与模态窗口重叠，这看起来有点傻.

When it is active, users can still press Tab to focus on links and buttons in the background, some of which have tooltips and such. When these links are focused on, their tooltips overlap the modal window, which looks kind of silly.

有没有办法在模态窗口处于活动状态时禁用 Tab，并在关闭时重新启用 Tab?

Is there a way to disable Tab while the modal window is active, and re-enable Tab when it closes?

推荐答案

您可以通过以下方式禁用 Tab 键.

You can disable the tab key with the following.

$(document).keydown(function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
    }
});

在调用 e.preventDefault() 之前，您需要在那里进行某种检查，以查看模态窗口是否打开检查 dom 元素是否可见.

You will want some kind of check in there to also see if the modal window is open before calling e.preventDefault() You can do this by setting a flag on modal open/close or simply checking if the dom element is visible.

这篇关于在 Bootstrap 模式处于活动状态时禁用 Tab 键聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！