带有引导程序弹出模式菜单的选项卡索引

Tab index with bootstrap pop up modal menu

本文关键字：选项 索引 菜单 模式 引导程序      更新时间：2023-09-26

我有一个html页面，如何以不同的方式为引导弹出模式和main指定选项卡索引。

如果弹出窗口是打开的，则表索引应仅适用于弹出模式。但当我点击弹出模式选项卡的最后一个元素时，将控制转移到主页面。

 <a href="#">first element</a>
 .
 .
 ...
<a href="#" >last element in popup</a>

当我在最后一个a上按下tab时，它应该将焦点转移到第一个元素，而不是转移到主页面内容

在dom 中添加要选择的id

 <a href="#" id="first">first element</a>
 .
 .
 ...
<a href="#" id="last" >last element in popup</a>

检查最后一个标签是否引发事件，然后将焦点设置为第一个元素

  <script type="text/javascript">
            document.getElementById('last').onkeydown = function(e){
                if (e.keyCode == 9) {
                    document.getElementById('first').focus();
                }
            }
     </script>

如果您的意思是，当您从最后一个元素按下tab时，模态关闭，那么尝试在模态参数中添加这些参数

（请确保您的模态包含一个关闭按钮，否则您将无法关闭模态，因为从"esc"按钮输入或在模态主体外点击时，模态将不会关闭。）

data-backdrop="static" data-keyboard="false"

但是如果你想通过点击模态关闭模态，那么只使用

data-keyboard="false"

尝试下面的

$('#myModal').keydown(function(e){
 if($('#last').is(":focus") && (e.which || e.keyCode) == 9){
e.preventDefault();
$('#first').focus();
  }
});

您可以执行以下操作：

private tabKey(event: KeyboardEvent) {
        let parentModal = $(document).find('.modal');
        //List of html elements which can be focused by tabbing.
        let focusableElementsArrayString = 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"]';
        let focusableElementsInModal = parentModal.find(focusableElementsArrayString);
        let numberOfElements = focusableElementsInModal.length;
        let firstTabElement = focusableElementsInModal[0];
        let lastTabElement = focusableElementsInModal[numberOfElements - 1];
        // Check for Shift + Tab
        if (event.keyCode === 9 && event.shiftKey) {
            if (document.activeElement === firstTabElement) {
                event.preventDefault();
                lastTabElement.focus();
            } // Check for Tab
        } else if (event.keyCode === 9) {
            if (document.activeElement === lastTabElement) {
                event.preventDefault();
                firstTabElement.focus();
            }
        }
    }
相关文章：