相关疑难解决方法(0)

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>
Run Code Online (Sandbox Code Playgroud)

我希望在显示模态后我的输入字段会被聚焦.
我尝试了自动对焦和将场焦点设置在$('modal').shown()事件上.它有点聚焦场(我有另一个事件,当场聚焦时显示标签)但实际上场没有聚焦,我必须按TAB再次聚焦.我也尝试过这样的事情:

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

autofocus:"autofocus"为我的字段设置属性.它产生了同样的效果.
我试过的一切都适用于模态只是一个普通的div,它会集中在页面加载上.但是当按钮触发模态时 - 没有任何作用(当然我也改变了逻辑,当模态只是一个普通的div时我可以将它集中在onload上,当我按下按钮时我会考虑它并尝试相应地解决它).

我想要的只是在加载模态后要聚焦的字段,以便它有闪烁的光标,用户可以开始输入.

唯一有用的是改变bootstrap.js本身,我把它$("#myInput").focus()放在bootstrap.js模式部分里面,但是我忘了它在哪里,第二 - 我认为改变bootstrap.js …

javascript jquery ruby-on-rails twitter-bootstrap

53
推荐指数
6
解决办法
6万
查看次数