kon*_*gun 53 javascript jquery ruby-on-rails twitter-bootstrap
我从示例中得到以下模态形式:
<!-- 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模式部分里面,但是我忘了它在哪里,第二 - 我认为改变bootstrap.js API并不好,必须更容易更优雅的解决方案 请告诉我,谢谢xD
更新:
首先,感谢您的帮助!多亏了你,我发现我遇到的问题是Rails问题.
这是我做的:
1).rails generate controller home index
2).app/views/home/index.html和app/assets/javascript/something.js就像在这个jsFiddle中由robertklep提供的: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" %>
它按预期工作.再次感谢!
psc*_*amb 40
对于不需要每个对话框的特定代码的通用解决方案,您可以使用:
$('.modal').on('shown.bs.modal', function () {
$(this).find('input:text:visible:first').focus();
})
Sun*_*kar 11
尝试删除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">
只是改变$(this).find("[autofocus]:first").focus();以$(this).find("#myInput").focus();使其为我工作.如果您更改了Bootstrap API并想要撤消该更改,则可以随时重新下载并替换该文件.
如果你有"shown.bs.modal"的问题,只需设置一个超时.
setTimeout(function() {
$('#myInput').focus();
}, 500);
我删除了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代码中没有配置.
| 归档时间： |
|
| 查看次数： |
62762 次 |
| 最近记录： |