我有以下示例的模态表单:
<!-- 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 时,我可以在 onload 时聚焦它,当我通过按钮触发时,我会考虑并尝试相应地解决它)。
我想要的只是在模态框加载后,使字段集中,以便它具有闪烁的光标,用户可以开始输入。
唯一有效的方法是更改 bootstrap.js 本身,我在 bootstrap.js 模态框部分的某个位置放置了 $("#myInput").focus()
,但是我忘记了它在哪里,并且第二个问题是 - 我认为更改 bootstrap.js API 不好,必须有更简单、更优雅的解决方案。请给我建议,谢谢 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 在 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
处理程序中的代码对我来说完全有效(前提是您确实设置了autofocus
属性,否则选择器将找不到它):演示链接在此。 - robertklep