莫代尔具有tabIndex =“ - 1”获得重点选项卡

我与Twitter的引导做什么工作的，和我在一个模式tabindex属性遇到一个奇怪的问题：莫代尔具有tabIndex =“ - 1”获得重点选项卡

我想标签通过模态内的表单元素，但在最后一个按钮之后焦点在返回到关闭按钮之前消失。我在控制台中添加了一行记录哪个元素正在聚焦的元素，并且原来是模式本身，尽管它有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的错误/功能，还是其他的东西？

来源

2013-10-04 Stephan Muller

有趣的发现。它似乎是由bootstrap引入的某种错误或行为;非常奇怪的行为为标签索引-1。

这里有一个使用jQuery的工作，它涉及在模式上的第一个和最后一个可选择tab元素上设置一个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

来源

2013-11-26 17:09:00 Trevor

大，谢谢。不得不使用一种解决方法与*真的*解决问题是一种耻辱，但是这似乎像我想要的那样工作:) –

实际上集中在你的主模态的div去，你可以通过检查下面的代码

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

HTML代码

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

来源

2013-11-28 07:10:06

莫代尔具有tabIndex =“ - 1”获得重点选项卡

回答

相关问题