twitter引导模式中的自动对焦输入 [英] Autofocus input in twitter bootstrap modal
问题描述
我有这样的问题 - 我需要在 twitter 引导模式中自动聚焦某些元素(在它显示之后).棘手的部分在这里 - 这个模式的内容是使用数据远程"(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引导模式中的自动对焦输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!