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

Question

我正在使用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的错误/功能,还是完全不同的东西？

Answer 1

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

这是一个使用jQuery的工作,它涉及在模态的第一个和最后一个可选项元素上设置a first和lastid.

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

例

http://www.bootply.com/96858