在Twitter的引导模式输入自动对焦(Autofocus input in twitter boo

我有这样的问题 - 我需要自动对焦Twitter的引导模式里面的一些元素（它显示后）。棘手的部分是在这里 - 这个模式的内容是使用“数据的远程”（jQuery.load方法）从单独的HTML文件中加载，所以

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

只有当模式是之前加载工作。
现在的问题是 - 如何使自动对焦工作在第一时间模式的负载？

Answer 1:

我使用的引导3.0（希望，这一点也适用3.1以及）。

我们不得不使用tabindex="-1" ，因为它允许ESC键关闭模式。

所以，我是能够解决本次发行采用：

// 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();
});

Answer 2:

尝试删除的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">

希望这可以帮助！

Answer 3:

我不能让@ NC的解决方案在我的应用程序工作。它没有看到，是后来添加情态动词。这个工作对我来说，虽然

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

弗兰克方所指出的，你应该，如果你使用的是引导一个新版本，不依赖于使用autofocus HTML属性。

$('#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()
})

Answer 4:

以上答案是最新版本的自举有些过时。

：下面是摘自http://getbootstrap.com/javascript/#modals

由于HTML5是如何定义它的语义，将autofocus HTML属性在引导情态动词没有影响。为了达到同样的效果，用一些自定义JavaScript：
 $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() }) 

Answer 5:

你必须与输入autofocus属性你想集中显示在引导模式时。

是您的情态标记可被载入JavaScript的时候？

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

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

是您的情态标记动态生成的？

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

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

文章来源: Autofocus input in twitter bootstrap modal