twitter-bootstrap 带有 tabindex="-1" 的模态获得焦点在选项卡上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19183107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modal with tabindex="-1" gets focus on tab
提问by Stephan Muller
I'm working with Twitter Bootstrap at the moment, and I'm encountering a strange problem in the tabindex of a modal:
我目前正在使用 Twitter Bootstrap，并且在模态的 tabindex 中遇到了一个奇怪的问题：
I'm trying to tab through the form elements inside the modal, but after the last button the focus disappeared before coming back to the close button. I added a line in console that logs which element is being focused, and it turned out to be the modal itself, even though it has tabindex="-1".
我试图在模态内的表单元素之间切换，但是在最后一个按钮之后焦点在返回关闭按钮之前消失了。我在控制台中添加了一行记录哪个元素正在被聚焦，结果它是模态本身，即使它有tabindex="-1".
I'm unable to share my code, but a quick look at the Bootstrap docs told me that it also happens in their example modal. The problem is reproducable:
我无法分享我的代码，但快速浏览一下 Bootstrap 文档告诉我，它也发生在他们的示例模式中。问题是可重现的：
- Visit http://getbootstrap.com/2.3.2/javascript.html#modals
- Open the demo modal ("Launch Demo Modal" button)
- Tab through the fields. You'll lose focus after "Save changes" before it comes back to the close button.
- 访问http://getbootstrap.com/2.3.2/javascript.html#modals
- 打开演示模式（“启动演示模式”按钮）
- 选项卡浏览字段。在返回关闭按钮之前，您将在“保存更改”之后失去焦点。
Putting this in console will log whenever the modal (or in fact any element with tabindex="-1") gains focus.
每当模态（或实际上带有 的任何元素tabindex="-1"）获得焦点时，将其放入控制台将记录日志。
$('[tabindex="-1"]').focus(function(){
console.log('Focus is on an element with negative tabindex')
});
(It also logs it when you click on the modal obviously, but that's out of scope).
（当您显然单击模态时，它也会记录它，但这超出了范围）。
Why does this happen? How can I prevent this? Is this a browser bug, a bug/feature of Twitter Bootstrap, or something else entirely?
为什么会发生这种情况？我怎样才能防止这种情况？这是浏览器错误，Twitter Bootstrap 的错误/功能，还是其他什么东西？
采纳答案by Trevor
Interesting find. It appears to be some sort of bug or behavior introduced by bootstrap; Very odd behavior for tab index -1.
有趣的发现。它似乎是引导程序引入的某种错误或行为；标签索引 -1 的行为非常奇怪。
Here is one work around using jQuery, which involves setting a firstand lastid on the first and last tab-able elements on the modal.
这是使用 jQuery 的一个解决方法，它涉及在模态上的第一个和最后一个可选项卡元素上设置 afirst和lastid。
$('#myModal').keydown(function(e){
if($('#last').is(":focus") && (e.which || e.keyCode) == 9){
e.preventDefault();
$('#first').focus();
}
});
Example
例子
回答by rajesh kakawat
actually focus in going on your main modal div, you can check it by below code
实际上专注于您的主要模态div，您可以通过以下代码进行检查
#yourModalId:focus
{
background-color:yellow;
border:1px solid red;
}
HTML CODE
HTML代码
<div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
回答by Canada Wan
Thanks to Trevor. This is my final code:
感谢特雷弗。这是我的最终代码：
$('.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();
}
});
