jQuery Twitter bootstrap 模态输入字段焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15474862/
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
Twitter bootstrap modal input field focus
提问by konnigun
I have the following modal form from example:
我有以下示例中的模态形式：
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Enter something: <input type="text" id="myInput">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
I want my input field to be focused after modal is shown.
I've tryed both autofocus and setting field focus on $('modal').shown()event. It kinda focuses field (I have another event which shows label when field is focused) but in fact field is not focused and I have to press TABto focus it again.
I also tried something like this:
我希望我的输入字段在显示模态后聚焦。
我已经尝试了自动对焦和设置字段对$('modal').shown()事件的关注。它有点关注领域（我有另一个事件，当领域被聚焦时显示标签）但实际上领域没有聚焦，我必须TAB再次按下它。我也尝试过这样的事情：
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
and setting autofocus:"autofocus"attribute for my field.
It gave same effect.
Everything I tried works for when modal is just a usual div, it gets focus on page load. But when modal is triggered by button - nothing works (sure I change logic also, when modal is just a usual div I can focus it onload, when I trigger by button I take it into account and try to solve it accordingly).
并autofocus:"autofocus"为我的领域设置属性。它产生了相同的效果。
当模态只是一个普通的 div 时，我尝试过的一切都适用，它专注于页面加载。但是当模态由按钮触发时 - 没有任何作用（当然我也改变逻辑，当模态只是一个普通的 div 时，我可以将它集中在加载上，当我通过按钮触发时，我会考虑它并尝试相应地解决它）。
What I want is just field to be focused after modal is loaded, so that it has blinking cursor and user can just start typing.
我想要的只是在加载模态后要聚焦的字段，以便它具有闪烁的光标并且用户可以开始输入。
Only thing that worked is changing bootstrap.js itself, I've put $("#myInput").focus()somewhere inside bootstrap.js modal section but well I forgot where it was, and second - I think it's not good to change bootstrap.js API, there must be easier and more elegant solution. Advice me please, thanks xD
唯一有效的是改变 bootstrap.js 本身，我已经把它$("#myInput").focus()放在 bootstrap.js 模态部分的某个地方，但我忘了它在哪里，第二 - 我认为改变 bootstrap.js API 不好，必须有更容易和更优雅的解决方案。请给我建议，谢谢xD
UPDATE:
First of all, thanks for your help!
Thanks to you I figured out that problem I had is Rails problem.
更新：
首先，感谢您的帮助！感谢您，我发现我遇到的问题是 Rails 问题。
Here is what I did:
1). rails generate controller home index
2). app/views/home/index.htmland app/assets/javascript/something.jsare like in this jsFiddle provided by robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.jsand bootstrap.jsare in app/assets/javascript/(both are fresh from website, nothing changed)
5). app/views/layouts/application.html.erb- I guess this file is the key of our solution:
这是我所做的：
1）。rails generate controller home index
2）。app/views/home/index.html和app/assets/javascript/something.js就像 robertklep 提供的这个jsFiddle：http: //jsfiddle.net/JCaFp/
4）。jquery-1.9.1.js和bootstrap.js在app/assets/javascript/ 中（两者都是从网站上获取的，没有任何变化）
5）。app/views/layouts/application.html.erb- 我猜这个文件是我们解决方案的关键：
<!DOCTYPE html>
<html>
<head>
<title>Udc</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Still doesn't work. All js files get included, but when I open my modal in browser - input get focus for a moment and gets unfocused again.
还是不行。所有 js 文件都被包含在内，但是当我在浏览器中打开我的模式时 - 输入获得焦点片刻并再次失去焦点。
I've also tried this:
我也试过这个：
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
Still same stuff.
Suggestions? :)
还是一样的东西。
建议？:)
UPDATE:
更新：
Solved it!
解决了！
After changing my somehow.jsto
改变我的somehow.js后
$(document).ready(function() {
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
and application.html.erbstylesheet to:
和application.html.erb样式表：
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
it works as expected. Thanks again!
它按预期工作。再次感谢！
回答by David Kirkland
回答by pschwamb
For a general solution that doesn't require specific code for each dialog, you can use this:
对于不需要每个对话框的特定代码的通用解决方案，您可以使用：
$('.modal').on('shown.bs.modal', function () {
$(this).find('input:text:visible:first').focus();
})
回答by Sunil Shivalkar
Try removing tabindex="-1"and it works nice.
尝试删除tabindex="-1"它，效果很好。
So change this:
所以改变这个：
<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
To this:
对此：
<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
回答by Austin Cummings
Just changing $(this).find("[autofocus]:first").focus();to $(this).find("#myInput").focus();made it work for me. If you have changed the Bootstrap API and want to undo that change, you can always just re-download and replace the file.
只是改变$(this).find("[autofocus]:first").focus();以$(this).find("#myInput").focus();使其为我工作。如果您更改了 Bootstrap API 并想撤消该更改，您可以随时重新下载并替换文件。
回答by hacklover
If you have problems with "shown.bs.modal", just set a timeout.
如果您对“shown.bs.modal”有疑问，只需设置超时即可。
setTimeout(function() {
$('#myInput').focus();
}, 500);
回答by Richard Rebeco
I removed tabindex="-1" and it works so nice.
我删除了 tabindex="-1" 并且效果很好。
My HTML code before changes:
更改前的 HTML 代码：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
My HTML code after changes:
更改后我的 HTML 代码：
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
My Input code:
我的输入代码：
<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>
And I have no configurations in my Javascript code.
我的 Javascript 代码中没有配置。
回答by Deborah
I think the updated answer is pretty clever. Here is another way to solve it.
我认为更新的答案非常聪明。这是解决它的另一种方法。
Bootstrap 3.2's js file includes a script to manage focus during and after the modal's fade transition. This interferes with any jQuery, javascript or rails+HTML5 focusing on a form field in the modal - bootstrap removes your focus after the modal loads.
Bootstrap 3.2 的 js 文件包含一个脚本，用于在模态淡入淡出过渡期间和之后管理焦点。这会干扰任何 jQuery、javascript 或 rails+HTML5 专注于模式中的表单字段 - 引导程序会在模式加载后移除您的焦点。
To remove bootstrap's ability to override your focus, comment out this line in the Modal script area:
要删除引导程序覆盖焦点的能力，请在模态脚本区域中注释掉这一行：
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
// that.$element.focus().trigger(e)
// the line above is stealing your focus after modal loads!
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger(e)
Now your field should be able to have focus in any modal form.
现在您的领域应该能够以任何模式形式获得焦点。
回答by Raz
You can do: e.g
你可以这样做：例如
<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>
just add this: autofocus: true
只需添加：自动对焦：真
回答by ctf0
You can also try
你也可以试试
$('#the-modal').on('shown.bs.modal', function(e) {
$('#the-input').focus();
});
