Twitter引导模式输入字段焦点 [英] Twitter bootstrap modal input field focus
问题描述
我的示例具有以下模式形式:
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>
我希望我的输入字段在显示模态后集中显示.
我尝试了自动对焦和将字段焦点设置为$('modal').shown()事件.它有点聚焦(我有另一个事件，当聚焦时会显示标签)，但实际上聚焦没有聚焦，我必须按TAB再次聚焦.
我也尝试过这样的事情:
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 TAB to focus it again.
I also tried something like this:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
并为我的字段设置autofocus:"autofocus"属性.
它产生了相同的效果.
当模式只是通常的div时，我尝试过的所有功能都可以正常工作，它专注于页面加载.但是当模式被按钮触发时-没有任何作用(请确保我也更改逻辑，当模式只是通常的div时，我可以将其重点放在加载上，当我通过按钮触发时，我将其考虑在内并尝试相应地解决它).
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).
我想要的只是模态加载后要聚焦的字段，以便它具有闪烁的光标，并且用户可以开始输入.
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.
只有有效的方法是更改bootstrap.js本身，我已经将$("#myInput").focus()放在了bootstrap.js模态部分的某个位置，但是我忘了它在哪里，其次-我认为更改bootstrap.js API不好，必须有一个更简单，更优雅的解决方案.请给我建议，谢谢xD
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
更新:
首先，感谢您的帮助！
多亏了您，我才发现我遇到的问题是Rails问题.
UPDATE:
First of all, thanks for your help!
Thanks to you I figured out that problem I had is Rails problem.
这是我的工作:
1). rails generate controller home index
2). app/views/home/index.html 和 app/assets/javascript/something.js 类似于 robertklep 提供的jsFiddle: a href ="http://jsfiddle.net/JCaFp/"> http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js 和 bootstrap.js 位于 app/assets/javascript/中(两者均来自网站，没有任何更改)
5). app/views/layouts/application.html.erb -我猜这个文件是我们解决方案的关键:
Here is what I did:
1). rails generate controller home index
2). app/views/home/index.html and app/assets/javascript/something.js are like in this jsFiddle provided by robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js and bootstrap.js are 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:
<!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文件都包含在内，但是当我在浏览器中打开模态时，输入会暂时聚焦，然后再次失去焦点.
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.
我也尝试过:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
还是一样的东西.
有什么建议吗? :)
Still same stuff.
Suggestions? :)
更新:
解决了！
将我的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" %>
它按预期工作.再次感谢！
it works as expected. Thanks again!
推荐答案
我认为显示事件名称已在Bootstrap 3中更改，如此帖子所述.
I think the shown event name changed in Bootstrap 3, as explained in this post.
As @MrDBA notes, in Bootstrap 3 the event name is changed to
shown.bs.modal.
因此，对于Bootstrap 3，请使用:
So, for Bootstrap 3 use:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus();
})
这篇关于Twitter引导模式输入字段焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
