jQuery 推特引导模式中的自动对焦输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14940423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autofocus input in twitter bootstrap modal
提问by eawer
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
我有这样的问题 - 我需要在 twitter bootstrap modal 中自动聚焦一些元素（在它显示之后）。棘手的部分在这里 - 此模式的内容使用来自单独 HTML 文件的“数据远程”（jQuery.load 方法）加载，因此
$(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?
仅当之前加载了模态时才有效。
问题是 - 如何在第一次模态加载时使自动对焦工作？
回答by nc.
I'm using Bootstrap 3.0 (hopefully, this works with 3.1 as well).
我正在使用 Bootstrap 3.0（希望这也适用于 3.1）。
We had to use tabindex="-1"because that allows the ESC key to close the modal.
我们不得不使用，tabindex="-1"因为这允许 ESC 键关闭模式。
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();
});
回答by nooweel
try removing tabindex="-1" and it works fine.
尝试删除 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">
Hope this helps!
希望这可以帮助！
回答by Paul Oliver
I couldn't get @nc's solution working on my app. It didn't see modals that were added later. This worked for me though
我无法在我的应用程序上使用 @nc 的解决方案。它没有看到后来添加的模态。虽然这对我有用
$(document).on('shown.bs.modal', '.modal', function() {
$(this).find('[autofocus]').focus();
});
As Frank Fang points out, you should use this if you are using a newer version of Bootstrap that doesn't rely on the autofocusHTML attribute.
正如 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()
})
回答by Frank Fang
Above answers are somewhat outdated for latest Bootstrap versions.
对于最新的 Bootstrap 版本，以上答案有些过时。
Below is excerpted from: http://getbootstrap.com/javascript/#modals
以下摘自：http: //getbootstrap.com/javascript/#modals
Due to how HTML5 defines its semantics, the
autofocusHTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })
由于 HTML5 定义其语义的方式，
autofocusHTML 属性在 Bootstrap 模态中不起作用。要达到相同的效果，请使用一些自定义 JavaScript：$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })
回答by Aaron Hudon
You have an input with the autofocusattribute you want focused when the bootstrap modal is shown.
autofocus当显示引导模式时，您有一个包含您想要聚焦的属性的输入。
Is your modal markup available when JavaScript is loaded?
加载 JavaScript 时，您的模态标记是否可用？
Register an event handler on all .modalelements for the shown.bs.modalevent
在所有注册的事件处理程序.modal的元素shown.bs.modal事件
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
Is your modal markup dynamically generated?
你的模态标记是动态生成的吗？
Register an event handler on the entire document for the shown.bs.modalevent.
在整个文档上为该shown.bs.modal事件注册一个事件处理程序。
$(document).on('shown.bs.modal', '.modal', function () {
$(this).find('[autofocus]').focus();
});
