我从示例中得到以下模态形式:
<!-- 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>
我希望我的输入字段在显示模态后获得焦点。
我已经尝试在 $('modal').shown() 事件上自动对焦和设置字段焦点。它有点聚焦领域(我有另一个事件在聚焦领域时显示标签)但实际上领域没有聚焦，我必须按 TAB 再次聚焦它。
我也尝试过这样的事情:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
并为我的字段设置 autofocus:"autofocus" 属性。
它产生了同样的效果。
当模态只是一个普通的 div 时，我尝试的一切都适用，它会专注于页面加载。但是当模态由按钮触发时 - 没有任何作用(当然我也改变了逻辑，当模态只是一个普通的 div 时我可以将它集中在加载上，当我通过按钮触发时我会考虑它并尝试相应地解决它)。
我想要的只是在加载模式后聚焦的字段，以便它有闪烁的光标，用户可以开始输入。
唯一有效的是更改 bootstrap.js 本身，我将 $("#myInput").focus() 放在 bootstrap.js 模态部分的某处，但我忘了它在哪里，其次 - 我认为更改 bootstrap.js API 不好，必须有更简单、更优雅的解决方案。请多多指教，谢谢xD
更新:
首先，感谢您的帮助!
多亏了你，我才发现我遇到的问题是 Rails 问题。
这是我做的:
1). rails 生成 Controller 主页索引
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>
还是不行。所有 js 文件都包含在内，但是当我在浏览器中打开我的模态时 - 输入获得焦点并再次失去焦点。
我也试过这个:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
还是一样的东西。
建议？ :)
更新:
解决了!
将我的 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" %>
它按预期工作。再次感谢!
最佳答案
我认为 shown Bootstrap 3 中的事件名称已更改，如 this 中所述发布。
As @MrDBA notes, in Bootstrap 3 the event name is changed to
shown.bs.modal.
因此，对于 Bootstrap 3 使用:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus();
})
关于javascript - Twitter Bootstrap 模式输入字段焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15474862/