jQuery 显示后如何将焦点设置为引导模式中的第一个文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15247849/
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
How to Set focus to first text input in a bootstrap modal after shown
提问by Amr Elgarhy
I load a dynamic bootstrap modal and it contains few text inputs. The issue i face that i want the cursor to focus on the first input in this modal, and this is not happening by default.
So i wrote this code to do it:
我加载了一个动态引导模式，它包含很少的文本输入。我面临的问题是我希望光标专注于此模式中的第一个输入，默认情况下不会发生这种情况。
所以我写了这段代码来做到这一点：
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
But now it focus on the in the input for a moment then go away automatically, why this is happening and how to solve?
但是现在它专注于输入一会儿然后自动消失，为什么会发生这种情况以及如何解决？
回答by David Taiaroa
@scumah has the answer for you: Twitter bootstrap - Focus on textarea inside a modal on click
@scumah 为您提供答案：Twitter bootstrap - 单击时专注于模态内的 textarea
For Bootstrap 2
对于引导程序 2
modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});
Update: For Bootstrap 3
更新：对于 Bootstrap 3
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
========== Update ======
========== 更新 ======
In response to a question, you can use this with multiple modals on the same page if you specify different data-targets, rename your modals IDs to match and update the IDs of the form input fields, and finally update your JS to match these new IDs:
see http://jsfiddle.net/panchroma/owtqhpzr/5/
在回答一个问题时，如果您指定不同的数据目标，您可以在同一页面上使用多个模态，重命名您的模态 ID 以匹配和更新表单输入字段的 ID，最后更新您的 JS 以匹配这些新的ID：
见http://jsfiddle.net/panchroma/owtqhpzr/5/
HTML
HTML
...
<button ... data-target="#myModal1"> ... </button>
...
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
...
<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>
JS
JS
$('#myModal1').on('shown.bs.modal', function() {
$('#textareaID1').focus();
})
回答by timothymarois
I found the best way to do this, without jQuery.
我找到了最好的方法，不用 jQuery。
<input value="" autofocus>
works perfectly.
完美地工作。
This is a html5 attribute. Supported by all major browsers.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
这是一个 html5 属性。所有主流浏览器都支持。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
回答by Marcos Furquim
The answer of David Taiaroa is correct, but doesn't work because the time to "fade in" the modal doesn't let you set focus on input. You need to create a delay:
David Taiaroa 的答案是正确的，但不起作用，因为“淡入”模态的时间不允许您将注意力集中在输入上。您需要创建一个延迟：
$('#myModal').on('shown.bs.modal', function () {
...
setTimeout(function (){
$('#textareaID').focus();
}, 1000);
})
回答by éderson T. Szlachta
回答by Amr Elgarhy
I got that bootstrap added the following info on their page:
我让引导程序在他们的页面上添加了以下信息：
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模态中不起作用。要达到相同的效果，请使用一些自定义 JavaScript：
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
回答by Junaid Anwar
This is the simple code that will work for you best on all popups that has any input field with focusing it
这是简单的代码，最适合您在所有具有任何输入字段并聚焦它的弹出窗口中
$(".modal").on('shown.bs.modal', function () {
$(this).find("input:visible:first").focus();
});
回答by Phil Hodgson
I think the most correct answer, assuming the use of jQuery, is a consolidation of aspects of all the answers in this page, plus the use of the event that Bootstrap passes:
我认为最正确的答案，假设使用 jQuery，是这个页面中所有答案的方面的整合，加上 Bootstrap 通过的事件的使用：
$(document).on('shown.bs.modal', function(e) {
$('input:visible:enabled:first', e.target).focus();
});
It also would work changing $(document)to $('.modal')or to add a class to the modal that signals that this focus should occur, like $('.modal.focus-on-first-input')
它也可以更改$(document)为$('.modal')或向模态添加一个类，以表示应该发生此焦点，例如$('.modal.focus-on-first-input')
回答by Jitesh Tukadiya
try this code, it might work for you
试试这个代码，它可能对你有用
$(this).find('input:text')[0].focus();
回答by Fendi Septiawan
First step, you have to set your autofocusattribute on form input.
第一步，您必须autofocus在表单输入上设置您的属性。
<input name="full_name" autofocus/>
And then you have to add declaration to set autofocus of your input after your modal is shown.
Try this code :
然后您必须添加声明以在显示模态后设置输入的自动对焦。
试试这个代码：
$(document).on('ready', function(){
// Set modal form input to autofocus when autofocus attribute is set
$('.modal').on('shown.bs.modal', function () {
$(this).find($.attr('autofocus')).focus();
});
});
回答by Hassan ALAMI
if you're looking for a snippet that would work for all your modals, and search automatically for the 1st input text in the opened one, you should use this:
如果您正在寻找适用于所有模态的代码段，并在打开的文本中自动搜索第一个输入文本，则应使用以下代码：
$('.modal').on('shown.bs.modal', function () {
$(this).find( 'input:visible:first').focus();
});
If your modal is loaded using ajax, use this instead:
如果您的模态是使用 ajax 加载的，请改用：
$(document).on('shown.bs.modal', '.modal', function() {
$(this).find('input:visible:first').focus();
});
