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

Question

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

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

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

Answer 1

我正在使用Bootstrap 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();
});

正如Frank Fang指出的那样,如果您使用的是不依赖于autofocusHTML属性的较新版本的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()
})

Answer 4

对于最新的 Bootstrap 版本，上述答案有些过时。

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

由于 HTML5 定义其语义的方式，autofocusHTML 属性在 Bootstrap 模式中不起作用。要达到相同的效果，请使用一些自定义 JavaScript：

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