Twitter bootstrap - 专注于点击模式内的textarea

Question

刚刚开始玩bootstrap,这太棒了.

我想弄清楚这一点.我有一个textarea在模态窗口内反馈.它很棒.但是当我点击按钮激活模态时,我希望焦点转到textarea.我似乎无法让它发挥作用.

这是一个小提琴:http://jsfiddle.net/denislexic/5JN9A/4/

这是代码:

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>?

这是JS

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});?

要恢复 当我点击"启动模式"时,我想要显示模态并将焦点放在textarea上.

谢谢你的帮助.

Answer 1

它不起作用,因为当您单击按钮时尚未加载模态.您需要挂钩的焦点事件,和去引导的模态页面,我们看到的情况shown,即is fired when the modal has been made visible to the user (will wait for css transitions to complete).而这正是我们想要的.

试试这个:

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
?

这是你的小提琴更新:http://jsfiddle.net/5JN9A/5/

更新:

正如@MrDBA所指出的,在Bootstrap 3中,事件名称被更改为shown.bs.modal.因此,对于Bootstrap 3使用:

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

Bootstrap 3的新小提琴:http://jsfiddle.net/WV5e7/

Answer 2

我想要一个声明版本,所以我选择了以下内容:

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

然后,您可以简单地向您的字段添加data-modalfocus属性,如下所示:

<input type="text" data-modalfocus />

当模态弹出时,你的领域将获得焦点.

Answer 3

Bootstrap3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

Bootstrap 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});