在twitter bootstrap模式中自动对焦输入

I have such problem - I need to autofocus some element inside twitter bootstrap modal (after it shows). The tricky part is here - content of this modal is loaded using 'data-remote' (jQuery.load method) from separate HTML file, so

我有这样的问题 - 我需要在twitter bootstrap模式中自动聚焦一些元素（在它显示之后）。棘手的部分在这里 - 这个模态的内容是使用'data-remote'（jQuery.load方法）从单独的HTML文件加载的，所以

$(document).on('shown', ".modal", function() {
    $('[autofocus]', this).focus();
});

works only if modal was loaded before.
The question is - how to make autofocus work at the first time modal loads?

仅在之前加载模态时才有效。问题是 - 如何在第一次模态加载时使自动对焦工作？

5 个解决方案

#1

I'm using Bootstrap 3.0 (hopefully, this works with 3.1 as well).

我正在使用Bootstrap 3.0（希望这也适用于3.1）。

We had to use tabindex="-1" because that allows the ESC key to close the modal.

我们必须使用tabindex =“ - 1”，因为它允许ESC键关闭模态。

So I was able to fix this issue using:

所以我能够使用以下方法修复此问题：

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

#2

try removing tabindex="-1" and it works fine.

尝试删除tabindex =“ - 1”，它工作正常。

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

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Hope this helps!

希望这可以帮助！

#3

I couldn't get @nc's solution working on my app. It didn't see modals that were added later. This worked for me though

我无法让@ nc的解决方案适用于我的应用程序。它没有看到后来添加的模态。这虽然对我有用

$(document).on('shown.bs.modal', '.modal', function() {
  $(this).find('[autofocus]').focus();
});

As Frank Fang points out, you should use this if you are using a newer version of Bootstrap that doesn't rely on the autofocus HTML attribute.

正如Frank Fang指出的那样，如果您使用的是不依赖于自动聚焦HTML属性的较新版本的Bootstrap，则应使用此方法。

$('#myModal').on('shown.bs.modal', function () {
  // get the locator for an input in your modal. Here I'm focusing on
  // the element with the id of myInput
  $('#myInput').focus()
})

#4

Above answers are somewhat outdated for latest Bootstrap versions.

Below is excerpted from: http://getbootstrap.com/javascript/#modals

以下摘自：http：//getbootstrap.com/javascript/#modals

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

由于HTML5如何定义其语义，自动聚焦HTML属性对Bootstrap模式没有影响。要达到相同的效果，请使用一些自定义JavaScript：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

#5

You have an input with the autofocus attribute you want focused when the bootstrap modal is shown.

在显示引导模式时，您有一个您想要聚焦的自动聚焦属性的输入。

Is your modal markup available when JavaScript is loaded?

加载JavaScript时，您的模态标记是否可用？

Register an event handler on all .modal elements for the shown.bs.modal event

在shown.bs.modal事件的所有.modal元素上注册事件处理程序

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

Is your modal markup dynamically generated?

你的模态标记是动态生成的吗？

Register an event handler on the entire document for the shown.bs.modal event.

在shown.bs.modal事件的整个文档上注册事件处理程序。

$(document).on('shown.bs.modal', '.modal', function () {
    $(this).find('[autofocus]').focus();
});