Question

我从示例中获得以下模式形式：

<!-- 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本身，我把$("#myInput").focus()放在bootstrap.js模式部分的某处但是我忘记了它的位置，其次 - 我认为改变引导程序并不好。 js API，必须有更简单，更优雅的解决方案。请告诉我，谢谢xD

更新
首先，感谢您的帮助！多亏了你，我发现我遇到的问题是Rails问题。

这是我做的：
1）。 rails generate controller home index
2）。 app / views / home / index.html 和 app / assets / javascript / something.js 就像在 robertklep 提供的这个jsFiddle中一样：{ {3}}
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" %>

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

Answer 1

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

正如@MrDBA所述 Bootstrap 3事件名称是 changed来 shown.bs.modal。

因此，对于Bootstrap 3使用：

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

Answer 2

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

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

Answer 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">

Answer 4

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

Answer 5

如果您遇到＆＃34; shown.bs.modal＆＃34;的问题，请设置超时。

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

Answer 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代码中没有配置。

Answer 7

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

Bootstrap 3.2的js文件包含一个脚本，用于在模态淡入淡出过渡期间和之后管理焦点。这会干扰任何jQuery，javascript或rails + HTML5，专注于模态中的表单字段 - bootstrap会在模态加载后移除焦点。

要删除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)

现在你的领域应该能够以任何模态形式聚焦。

Answer 8

你可以这样做：例如

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

只需添加：autofocus：true

Answer 9

您也可以尝试

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

Twitter bootstrap模态输入字段焦点

9 个答案: