在twitter引导模式下的自动对焦input

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

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

只有在模态被加载之前工作。
问题是 – 如何使自动对焦在第一次模态加载工作？

Answer 1

我使用的Bootstrap 3.0（希望，这也适用于3.1）。

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

所以我能够解决这个问题使用：

 // 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的解决scheme在我的应用程序工作。 它没有看到后来添加的模态。 这虽然为我工作

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

正如Frank Fang指出的那样，如果您使用的是不依赖于autofocus HTML属性的较新版本的Bootstrap，则应该使用此autofocus 。

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

以上答案对于最新的Bootstrap版本已经过时了。

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

由于HTML5定义了其语义， autofocus HTML属性在Bootstrap模式中没有任何作用。 要达到相同的效果，请使用一些自定义JavaScript：

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

Answer 5

显示引导模式时，您需要使用autofocus属性进行input。

JavaScript加载后，您的模式标记是否可用？

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

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

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

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

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