54

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

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

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

4

6 回答 6

113

我正在使用 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();
});
于 2014-05-28T20:50:54.213 回答
29

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

希望这可以帮助！

于 2013-09-05T01:58:50.610 回答
21

我无法让@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()
})
于 2015-10-24T22:02:18.420 回答
4

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

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

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

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
于 2016-09-06T05:50:58.943 回答
1

接受的答案处理焦点在模态中的自动对焦按钮，但之后不要将焦点恢复到主页。如果您要从用户希望之后按 Enter 提交的表单中显示模式，这可能是不可取的。

所以这是处理显示和隐藏模式的完整代码：

// All modals will take enter to mean clicking the button with the autofocus property
$(document).ready(function () {
    $('.modal').on('shown.bs.modal', function() {
        $(this).find('[autofocus]').focus();
    });
    $('.modal').on('show.bs.modal', function(e) {
        var activeElement = document.activeElement;
        $(this).on('hidden.bs.modal', function () {
            activeElement.focus();
            $(this).off('hidden.bs.modal');    
        });
    });
});

注意：此代码清除模式hidden.bs.modal事件上的所有事件侦听器。如果您有该事件的其他侦听器，那么您需要将隐藏函数转换为命名函数，您可以通过引用从事件侦听器中引用和删除该函数。

于 2020-07-10T18:21:52.223 回答
0

当显示引导模式时，您有一个带有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();
});
于 2017-09-05T05:52:15.487 回答