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.htmlapp/assets/javascript/something.js 就像 robertklep 提供的这个 jsFiddle:@ 987654321@ 4)。 jquery-1.9.1.jsbootstrap.jsapp/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 引导模式后面