Twitter 引导模式输入字段焦点

Posted 2023-05-07

技术标签:

【中文标题】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】：

只需将 $(this).find("[autofocus]:first").focus(); 更改为 $(this).find("#myInput").focus(); 即可。如果您更改了 Bootstrap API 并想要撤消该更改，您可以随时重新下载并替换该文件。

【讨论】：

【参考方案2】：

我认为更新后的答案非常聪明。这是另一种解决方法。

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)

现在您的字段应该能够以任何模式形式获得焦点。

【讨论】：

我也看到了这个。我想知道那条线试图完成什么。看起来好像它试图将焦点放在模态上。有没有办法利用引导程序在这里所做的而不是猴子修补行为？【参考方案3】：

我认为 shown 事件名称在 Bootstrap 3 中已更改，如 this 帖子中所述。

正如@MrDBA 所说，在 Bootstrap 3 事件名称是 changed 到 shown.bs.modal.

因此，对于 Bootstrap 3 使用：

$('#myModal').on('shown.bs.modal', function () 
    $('#myInput').focus();
)

【讨论】：

这确实是一个确定的答案，因为即使您在 HTML 控件中将该字段设置为自动对焦，当模态对话框出现时，该控件将在短时间内获得焦点，然后再次失去焦点。谢谢。【参考方案4】：

如果您对“shown.bs.modal”有疑问，只需设置超时即可。

setTimeout(function() 
$('#myInput').focus();
, 500);

【讨论】：

【参考方案5】：

对于每个对话框不需要特定代码的通用解决方案，您可以使用：

$('.modal').on('shown.bs.modal', function () 
  $(this).find('input:text:visible:first').focus();
)

【讨论】：

我仍然想知道为什么 bootstrap 会专门覆盖焦点，以及如何控制它。不得不删除可能大小写的 :text（密码字段），但除此之外效果很好。您可以删除以下行（在此示例中是多余的）：lastfocus = $(this); 太棒了，谢谢。对于我的用例，我将 $('.modal').on 更改为 $(document).on - 具有动态生成模式的单页应用程序。对于更通用的解决方案，可以删除选择器内的text，以便检测任何类型的输入。【参考方案6】：

尝试删除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 键关闭模式的功能。【参考方案7】：

你可以这样做：例如

<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>

只需添加：autofocus: true

【讨论】：

【参考方案8】：

我删除了 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 代码中没有配置。

【讨论】：

这对我只有效一次。关闭和重新打开模态框不会聚焦。【参考方案9】：

你也可以试试

$('#the-modal').on('shown.bs.modal', function(e) 
    $('#the-input').focus();
);

【讨论】：

以上是关于Twitter 引导模式输入字段焦点的主要内容，如果未能解决你的问题，请参考以下文章

从 Angular 控制器关闭 Twitter 引导模式

将 twitter 引导程序与 Django 表单一起使用

Twitter 引导模式背景不会消失

如何关闭 twitter 引导模式（初始启动后）

如何使 Twitter 引导模式全屏

jQuery datepicker 出现在 twitter 引导模式后面