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指出的那样，如果您使用的是不依赖于autofocus 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()
})

Answer 4

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

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

由于HTML5如何定义其语义，autofocus HTML属性对Bootstrap模态没有影响。要达到同样的效果，请使用一些自定义JavaScript：
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 5

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

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

在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(); });事件的整个文档中注册事件处理程序。

{{1}}

Answer 6

可接受的答案将重点放在模式中的自动对焦按钮上，但是此后不要将焦点恢复到主页上。如果您要从用户希望通过按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事件上的所有事件侦听器。如果该事件还有其他侦听器，则需要将隐藏的函数转换为可引用的命名函数，并从事件侦听器中通过引用将其删除。

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

6 个答案:

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