Twitter引导模态input字段焦点
我从例子中有下面的模式forms：
<!-- 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> 显示模态后，我希望我的input字段能够被聚焦。
我已经尝试了自动对焦和$('modal').shown()事件设置场焦点。 它有点关注领域（我有另一个事件显示标签，当领域是集中的），但实际上领域没有集中，我不得不按TAB重新集中它。 我也尝试过这样的事情：
$(".modal").on('shown', function() { $(this).find("[autofocus]:first").focus(); });
并为我的领域设置autofocus:"autofocus"属性。 它给了同样的效果。
我试过的所有东西都适用于模态只是一个常用的div，它把重点放在页面加载上。 但是，当模式是由button触发 – 没有任何作品（当然我也改变了逻辑，当模态只是一个通常的div我可以集中它onload，当我触发button我考虑到，并试图相应地解决它）。
我想要的只是在模式被加载之后现场被聚焦，所以它具有闪烁的光标，用户可以开始input。
只有工作是改变bootstrap.js本身，我已经把$("#myInput").focus()在bootstrap.js模态部分内的某处但是我忘记了它在哪里，其次 – 我认为这不是好更改bootstrap.js API，必须有更简单更优雅的解决scheme。 请给我build议，谢谢xD
更新：
首先，感谢您的帮助！ 感谢你，我发现我遇到的问题是Rails问题。
这是我做的：
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在应用程序/资产/ JavaScript / （都是新鲜的网站，没有任何改变）
5）。 app / views / layouts / application.html.erb – 我猜这个文件是我们解决scheme的关键：
<!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>
依然不起作用。 所有js文件都包含在内，但是当我在浏览器中打开我的模式时 – input焦点一会儿，然后重新聚焦。
我也试过这个：
<%= javascript_include_tag "jquery" %> <%= javascript_include_tag "bootstrap" %> <%= javascript_include_tag "somehow" %>
还是一样的东西。
build议？ 🙂
更新：
解决了！
改变我的somehow.js后
$(document).ready(function() { $(".modal").on('shown', function() { $(this).find("[autofocus]:first").focus(); }); });
和application.html.erb样式表来：
<%= javascript_include_tag "jquery" %> <%= javascript_include_tag "bootstrap" %> <%= javascript_include_tag "somehow" %>
它按预期工作。 再次感谢！
我认为显示的事件名称在Bootstrap 3 中发生了变化，正如本文所述。
正如@MrDBA所指出的那样，在Bootstrap 3中，事件名称被更改为
shown.bs.modal。
因此，对于Bootstrap 3使用：
$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus(); })
对于不需要每个对话框的特定代码的通用解决scheme，您可以使用这个：
$('.modal').on('shown.bs.modal', function () { $(this).find('input:text:visible:first').focus(); })
尝试删除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">
只要改变$(this).find("[autofocus]:first").focus(); 到$(this).find("#myInput").focus(); 使它为我工作。 如果您更改了Bootstrap API并想撤销该更改，则始终可以重新下载并replace该文件。
如果您对“shown.bs.modal”有问题，请设置超时时间。
setTimeout(function() { $('#myInput').focus(); }, 500);
我删除了tabindex =“ – 1”，它工作得很好。
我的HTML代码更改之前：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
我的HTML代码更改后：
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
我的input代码：
<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>
而且我的Javascript代码中没有configuration。
我认为最新的答案是非常聪明的。 这是解决它的另一种方法。
引导3.2的js文件包括一个脚本来pipe理模式的淡入淡出过渡期间和之后的焦点。 这干扰任何jQuery，JavaScript或轨道+ HTML5的重点放在模态表单字段 – 引导程序删除模式加载后的焦点。
要删除引导程序覆盖焦点的能力，请在Modal脚本区注释掉这一行：
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)
现在你的领域应该能够以任何forms的forms为重点。
你可以做：例如
<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>
只需添加这个：autofocus：true
你也可以试试
$('#the-modal').on('shown.bs.modal', function(e) { $('#the-input').focus(); });
