54

我有来自示例的以下模态形式：

<!-- 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 ：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" %>

它按预期工作。再次感谢！

4

9 回答 9

82

我认为在 Bootstrap 3 中显示的事件名称已更改，如本文所述。

正如@MrDBA 所指出的，在 Bootstrap 3 中，事件名称 更改为 shown.bs.modal.

因此，对于 Bootstrap 3 使用：

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus();
})
于 2013-12-17T08:44:44.673 回答
41

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

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})
于 2014-05-09T18:26:30.273 回答
12

尝试删除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">
于 2015-02-12T06:49:08.403 回答
7

Just changing $(this).find("[autofocus]:first").focus(); to $(this).find("#myInput").focus(); made it work for me. If you have changed the Bootstrap API and want to undo that change, you can always just re-download and replace the file.

于 2013-03-18T10:57:19.347 回答
7

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

setTimeout(function() {
$('#myInput').focus();
}, 500);
于 2014-04-28T01:30:24.060 回答
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 代码中没有配置。

于 2015-03-10T14:20:16.470 回答
3

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

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)

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

于 2013-12-06T23:33:52.667 回答
1

你可以这样做：例如

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

只需添加以下内容：自动对焦：true

于 2015-03-02T17:58:32.063 回答
0

你也可以试试

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});
于 2016-06-17T09:03:20.573 回答