10

我目前正在使用 Twitter Bootstrap，并且在模态的 tabindex 中遇到了一个奇怪的问题：

我正在尝试通过模式内的表单元素进行选项卡，但是在最后一个按钮之后，焦点在返回关闭按钮之前消失了。我在控制台中添加了一行记录正在关注哪个元素，结果证明它是模态本身，即使它有tabindex="-1".

我无法分享我的代码，但快速查看 Bootstrap 文档告诉我，它也发生在他们的示例模式中。问题是可重现的：

  1. 访问http://getbootstrap.com/2.3.2/javascript.html#modals
  2. 打开演示模式（“启动演示模式”按钮）
  3. 浏览字段。在“保存更改”返回关闭按钮之前，您将失去焦点。

tabindex="-1"每当模态（或实际上任何带有 的元素）获得焦点时，将其放在控制台中都会记录。

$('[tabindex="-1"]').focus(function(){
    console.log('Focus is on an element with negative tabindex')
});

（当您显然单击模式时，它也会记录它，但这超出了范围）。

为什么会这样？我怎样才能防止这种情况？这是浏览器错误，Twitter Bootstrap 的错误/功能，还是完全其他的？

4

3 回答 3

10

有趣的发现。它似乎是引导程序引入的某种错误或行为；选项卡索引 -1 的行为非常奇怪。

这是一个使用 jQuery 的解决方法，它涉及在模式上的第一个和最后一个可选项卡元素上设置 afirst和lastid。

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

例子

http://www.bootply.com/96858

于 2013-11-26T17:09:00.960 回答
1

感谢特雷弗。这是我的最终代码：

$('.modal').keydown(function(e){
        var $focusable = $(this).find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
        if($focusable.last().is(":focus") && !e.shiftKey && e.key == "Tab"){
                e.preventDefault();
                $focusable.first().focus();
        }
        else
            if($focusable.first().is(":focus") && e.shiftKey  && e.key == "Tab"){
            e.preventDefault();
            $focusable.last().focus();
        }

    });
于 2018-12-03T18:56:11.953 回答
0

实际上专注于你的主要模态div，你可以通过下面的代码检查它

#yourModalId:focus
{
    background-color:yellow;
    border:1px solid red;
}

代码

 <div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
于 2013-11-28T07:10:06.027 回答