Twitter Bootstrap模态中的自动对焦输入 [英] Autofocus input in twitter bootstrap modal

问题描述

我有这样的问题-我需要在Twitter引导程序模态中自动调整某些元素的位置(显示后).棘手的部分在这里-使用"data-remote"(jQuery.load方法)从单独的HTML文件中加载此模式的内容，因此

I have such problem - I need to autofocus some element inside twitter bootstrap modal (after it shows). The tricky part is here - content of this modal is loaded using 'data-remote' (jQuery.load method) from separate HTML file, so

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

仅在之前加载了模态的情况下有效.
问题是-如何使自动对焦在模态负载首次出现时起作用?

works only if modal was loaded before.
The question is - how to make autofocus work at the first time modal loads?

推荐答案

我正在使用Bootstrap 3.0(希望它也适用于3.1).

I'm using Bootstrap 3.0 (hopefully, this works with 3.1 as well).

我们必须使用tabindex="-1"，因为这允许ESC键关闭模式.

We had to use tabindex="-1" because that allows the ESC key to close the modal.

因此我可以使用以下方法解决此问题:

So I was able to fix this issue using:

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

这篇关于Twitter Bootstrap模态中的自动对焦输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！