Twitter Bootstrap 模式对话框关闭后，有没有办法将文档置于“焦点”？答案

【问题标题】：Is there a way to put the document in "focus" after a Twitter Bootstrap modal dialog is closed?Twitter Bootstrap 模式对话框关闭后，有没有办法将文档置于“焦点”？
【发布时间】：2012-08-05 16:59:29
【问题描述】：

我正在使用 Twitter Bootstrap 进行模式对话框：http://twitter.github.com/bootstrap/javascript.html#modals (bootstrap-modal.js)。

当我点击“esc”时，模式会按预期关闭。但是，正如您从该页面上的示例中看到的那样，光标丢失了。用户必须单击浏览器窗口才能使其重新获得焦点。

这对我来说是个问题，因为我有一个主要由键盘快捷键驱动的网站。结果，一旦模态对话框关闭，用户将按下某个键，期望发生某些事情，但它不起作用。他/她首先必须在浏览器窗口中单击才能再次使用键盘快捷键。

我尝试在隐藏模式后调用$('body').focus()（即在$('#modalDiv').modal('hide'); 之后，但这并没有改变任何东西。

有什么想法吗？

【问题讨论】：

在什么浏览器中发生？在 Firefox、chrome、IE7-9、safari 中对我来说效果很好
哇，奇怪！在 Chrome 版本 21.0.1180.57 上鼠标光标消失了
我使用的是 21.0.1180.60，也没有看到这种行为。
在显示模态对话框时按“esc”，它消失了，光标又出现了？

标签： jquery twitter-bootstrap focus modal-dialog

【解决方案1】：

这是一个艰难的issue

一个可能成功的解决方法是延迟焦点触发

$("#your-modal").on("hidden.bs.modal",function(e){
   setTimeout(function(){
      $('#input-to-focus').focus();         
   },300);  
});`

【讨论】：

我认为这是可行的，因为它会等到引导程序将焦点返回给触发器，然后再应用焦点。不过不必等待 300 毫秒。

【解决方案2】：

尝试使用 hidden 事件：

$('body').on('hidden', '.modal', function (e) {
  e && e.delegateTarget.focus();
});

JSFiddle

【讨论】：

嗯，这不起作用。我在那里放了一个 console.log("modal hidden!") 行，但没有显示任何内容。我尝试将“.modal”更改为 .modalDiv 的名称，但仍然没有运气。将阅读隐藏事件以尝试更多。
感谢您的 jsfiddle！在模式上点击“esc”后我应该看到光标吗？因为即使在 jsfiddle 中，也不会返回光标（这让我相信不会返回焦点）。同样，这仅在“esc”上（按钮工作正常）。在我的代码中，我在调用 $('#modalDiv').modal('hide'); 后运行了你的函数
@tonic 您应该在文档加载时添加hidden 侦听器，而不是在另一个（用户事件）侦听器中，当然也不是在您要侦听的事件之后 .另外，为什么你首先要打电话给modal('hide')？ Bootstrap 模式已经内置了键盘 esc 关闭。也许你的措辞只是让我感到困惑。 o_O
道歉。没错，事件触发（通过 console.log 确认），但焦点不会返回到文档。在用户单击浏览器窗口中的某个位置之前，键盘快捷键不起作用。我首先调用 modal('hide') 的原因是因为在单击主按钮后，我调用了一个函数来更新一些内容，然后我需要隐藏模态。

【解决方案3】：

也请参阅此评论：

https://github.com/twitter/bootstrap/issues/2130#issuecomment-7664836

【讨论】：