javascript - javascript Twitter Bootstrap 模式输入字段焦点

  显示原文与译文双语对照的内容
71 4

我有以下的模式形式:

<!-- 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>

我希望在显示模式后,我的输入字段被聚焦。
我有tryed的自动对焦和设置字段的$('modal').shown() 事件。我只关注域( 我有另一个事件,当字段被聚焦时显示标签),但实际上字段没有聚焦,我必须按 TAB 来再次聚焦。我还尝试了一些类似的东西:

$(".modal").on('shown', function() {
 $(this).find("[autofocus]:first").focus();
});

为我的字段设置 autofocus:"autofocus" 属性。效果也一样。
当模态只是一个常见的div时,我所尝试的一切就是在页面负载上。但当模式触发的按钮- 没有工作的( 当然我更改逻辑,当模式只是一个我可以以焦点的onload,当我按按钮时,我会考虑解决它。) 。

我想要的只是在加载模式后要注重的字段,使它闪烁 cursor 和用户可以以开始输入。

只有改变 bootstrap.js 本身,我将 $("#myInput").focus() 放在 inside bootstrap.js 模式部分,但是我忘记了更改 bootstrap.js API的方法。请给我建议,谢谢 xD

更新:
首先,感谢你的帮助 !多亏了你我才知道我的问题是 Rails 问题。

这是我所做的:
1 ) 。rails generate controller home index
2 ) app/views/home/index.html and和 app/assets/javascript/something.js 类似于 robertklep 提供的这个 jsFiddle::http://jsfiddle.net/JCaFp/
4 ) jquery-1.9.1.js and and and and and 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" %>

它按预期工作。请再次 !

时间:原作者:0个回答

81 3

我认为显示的事件名称在 Bootstrap 3中改变了,如的文章所述。

@MrDBA 注意,在 Bootstrap 3中,事件名称是更改为 shown.bs.modal

因此,对于 Bootstrap 3用户:

$('#myModal').on('shown.bs.modal', function () {
 $('#myInput').focus();
})
原作者:
105 3

对于不需要每个对话框特定代码的通用解决方案,可以使用以下方法:

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

尝试删除 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">
原作者:
118 2

只是改变$(this).find("[autofocus]:first").focus();$(this).find("#myInput").focus(); 为我工作。如果你已经更改了 Bootstrap API并希望撤消该更改,则始终可以下载并替换文件。

原作者:
127 1

如果" shown.bs.modal"出现问题,请设置超时。

setTimeout(function() {
$('#myInput').focus();
}, 500);
原作者:
59 0

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

原作者:
129 1

我觉得更新的答案很聪明。这是解决它的另一种方法。

Bootstrap 3.2 js文件包括一个脚本,用于在模态转换过程中管理焦点。这干扰了任何 jQuery,javascript或者 rails+HTML5,聚焦于模态域中的窗体域- Bootstrap 在模态负载后移除焦点。

要删除 Bootstrap 覆盖焦点的能力,请在模态脚本区域中注释掉这一行:

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) 

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

原作者:
120 4

你可以:e.g

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

只需添加:自动对焦:true

原作者:
59 0

你也可以尝试

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