Twitter 引导模式输入字段焦点
Posted
技术标签:
【中文标题】Twitter 引导模式输入字段焦点【英文标题】：Twitter bootstrap modal input field focus 【发布时间】：2013-03-06 16:10:04 【问题描述】：我有以下示例中的模态形式：
<!-- 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" 属性。
它产生了相同的效果。
当 modal 只是一个普通的 div 时，我尝试的一切都有效，它专注于页面加载。但是当模态由按钮触发时 - 没有任何作用（当然我也改变了逻辑，当模态只是一个普通的 div 时，我可以将其集中在加载上，当我通过按钮触发时，我会考虑它并尝试相应地解决它）。
我想要的只是在加载模式后关注的字段，以便它具有闪烁的光标并且用户可以开始输入。
唯一有效的是更改 bootstrap.js 本身，我已将 $("#myInput").focus() 放在 bootstrap.js 模态部分的某个位置，但我忘记了它在哪里，其次 - 我认为更改 bootstrap.js API 不好，必须有更简单、更优雅的解决方案。请给我建议，谢谢xD
更新： 首先，感谢您的帮助！ 多亏了你，我发现我遇到的问题是 Rails 问题。
这是我所做的：
1）。 rails generate controller home index
2）。 app/views/home/index.html 和 app/assets/javascript/something.js 就像 robertklep 提供的这个 jsFiddle：@ 987654321@
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 属性，否则选择器将找不到它）：demo here
罗伯特，您能否添加您的评论作为答案？我会把它标记为正确的:)
【参考方案1】：
我认为 shown 事件名称在 Bootstrap 3 中已更改，如 this 帖子中所述。
正如@MrDBA 所说，在 Bootstrap 3 事件名称是 changed 到
shown.bs.modal.
因此，对于 Bootstrap 3 使用：
$('#myModal').on('shown.bs.modal', function ()
$('#myInput').focus();
)
【讨论】：
这确实是一个确定的答案，因为即使您在 HTML 控件中将该字段设置为自动对焦，当模态对话框出现时，该控件将在短时间内获得焦点，然后再次失去焦点。谢谢。【参考方案2】：对于每个对话框不需要特定代码的通用解决方案，您可以使用：
$('.modal').on('shown.bs.modal', function ()
$(this).find('input:text:visible:first').focus();
)
【讨论】：
我仍然想知道为什么 bootstrap 会专门覆盖焦点，以及如何控制它。 不得不删除可能大小写的 :text（密码字段），但除此之外效果很好。 您可以删除以下行（在此示例中是多余的）：lastfocus = $(this);
太棒了，谢谢。对于我的用例，我将 $('.modal').on 更改为 $(document).on - 具有动态生成模式的单页应用程序。
对于更通用的解决方案，可以删除选择器内的text，以便检测任何类型的输入。【参考方案3】：
尝试删除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">
【讨论】：
整个自动对焦元素的考验一直让我发疯，直到我遇到这个答案。从我的对话框中删除 tabindex="-1" 为我解决了这个问题！ 天哪，这也解决了问题。值得更多点赞！但是，tabindex 为-1 可能是有原因的。想知道我们是否通过删除它来破坏某些东西。 @MārtiņšBriedis 删除 tabindex 会破坏使用 Esc 键关闭模式的功能。【参考方案4】：只需将 $(this).find("[autofocus]:first").focus(); 更改为 $(this).find("#myInput").focus(); 就可以了。如果您更改了 Bootstrap API 并想要撤消该更改，您可以随时重新下载并替换该文件。
【讨论】：
【参考方案5】：如果您对“shown.bs.modal”有疑问，只需设置超时即可。
setTimeout(function()
$('#myInput').focus();
, 500);
【讨论】：
【参考方案6】：我删除了 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 id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>
而且我的 Javascript 代码中没有配置。
【讨论】：
这对我只有效一次。关闭和重新打开模态框不会聚焦。【参考方案7】：我认为更新后的答案非常聪明。这是另一种解决方法。
Bootstrap 3.2 的 js 文件包含一个脚本，用于在模式的淡入淡出过渡期间和之后管理焦点。这会干扰任何专注于模式中表单字段的 jQuery、javascript 或 rails+HTML5 - bootstrap 会在模式加载后移除您的焦点。
要移除引导程序覆盖您的焦点的能力，请在 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)
现在您的字段应该能够以任何模式形式获得焦点。
【讨论】：
我也看到了这个。我想知道那条线试图完成什么。看起来好像它试图将焦点放在模态上。有没有办法利用引导程序在这里所做的而不是猴子修补行为？【参考方案8】：你可以这样做： 例如
<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>
只需添加：autofocus: true
【讨论】：
【参考方案9】：你也可以试试
$('#the-modal').on('shown.bs.modal', function(e)
$('#the-input').focus();
);
【讨论】：
以上是关于Twitter 引导模式输入字段焦点的主要内容，如果未能解决你的问题，请参考以下文章