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.htmlapp / assets / javascript / something.js就像在这个由robertklep提供的jsFiddle中 : http : //jsfiddle.net/JCaFp/
4)。 jquery-1.9.1.jsbootstrap.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(); });