Question

我现在正在使用Twitter Bootstrap，我在模式的tabindex中遇到一个奇怪的问题：

我正在尝试通过模式中的表单元素进行制表，但在最后一个按钮之后焦点消失，然后返回关闭按钮。我在控制台中添加了一行来记录哪个元素正在被聚焦，并且结果是模态本身，即使它有tabindex="-1"。

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

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

只要模态（或实际上任何具有tabindex="-1"的元素）获得焦点，将其置于控制台中就会记录。

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

（当你单击模态时它也会记录它，但这超出了范围）。

为什么会这样？我怎么能阻止这个？这是一个浏览器错误，Twitter Bootstrap的错误/功能，还是完全不同的东西？

Answer 1

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

以下是使用jQuery的一项工作，其中包括在模态的第一个和最后一个可制表元素上设置first和last id。

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

实施例

http://www.bootply.com/96858

Answer 2

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

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

HTML CODE

 <div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

Answer 3

感谢Trevor。这是我的最终代码：

$('.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();
        }

    });

使用tabindex =“ - 1”的模态将焦点放在选项卡上

3 个答案: