70

刚开始玩引导程序，这太棒了。

我试图弄清楚这一点。我在模态窗口中有一个用于反馈的文本区域。它工作得很好。但是当您单击按钮激活模式时，我希望焦点在文本区域上。而且我似乎无法让它工作。

这是一个小提琴：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 上。

谢谢你的帮助。

4

13 回答 13

208

它不起作用，因为当您单击按钮时，模式尚未加载。您需要将焦点连接到一个事件，然后转到引导程序的模态页面，我们会看到该事件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/

于 2012-07-24T16:07:27.303 回答
21

我想要一个声明性版本，所以我选择了以下内容：

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

然后，您可以简单地将 data-modalfocus 属性添加到您的字段，如下所示：

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

当模态弹出时，您的字段将获得焦点。

于 2015-03-10T21:34:47.300 回答
11

引导程序3

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

引导程序 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});
于 2015-03-31T13:03:07.293 回答
4

您可以使用autofocushtml 元素来设置自动对焦。

<textarea id="textareaID" autofocus="" ></textarea>

在这里提琴（点击）

于 2013-12-26T22:42:00.457 回答
1

如果您的模态具有 'fade' 属性：

这将起作用，但您可能必须调整超时的持续时间，并且显然需要调整 ID：

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });
于 2013-08-23T18:09:35.977 回答
1

我在 chrome 中遇到了重大问题......我希望这对某人有所帮助。

//When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });
于 2013-12-26T16:01:40.973 回答
1

如您需要从模态中删除的评论之一中所述fade。所以这对我有用：

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>
于 2015-04-27T16:06:43.193 回答
1

我想要一些更通用的东西

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

有了这个，我给了我想要的 CSS 类 firstInput 的任何控制。设置焦点有一点延迟，这使它具有一定的天赋。

于 2016-02-19T21:46:22.980 回答
0

我不知道为什么，但选择的解决方案对我不起作用。我使用以下代码片段：

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

我知道它不是那么漂亮，但至少它有效.. Bootstrap v2.3.0

于 2013-08-26T10:54:08.023 回答
0

如果您使用 bootstrap v3 并且同时使用模式对话框和 wysihtml5 文本编辑器，则以下工作（假设 #basic 是模式表单的 ID）：

    $('#basic').on('shown.bs.modal', function () {
    editor.composer.element.focus()
})
于 2014-01-28T22:52:32.850 回答
0

将事件直接附加到模态屏幕对我不起作用。我正在使用此代码：

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

使用此代码，我只需将 myField 更改为我想要获得焦点的控件的 id，它还允许我为多个模式屏幕定义焦点，我有类似的内容：

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

来源http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

于 2015-07-23T13:57:16.583 回答
0

发现在做：

$(document).on('shown.bs.modal', function () {
  $(this).find('.form-control:visible:first').focus();
});

工作得很好，因为它只是找到第一个表单控件而不是需要特定的 id 等。这正是大多数时间所需要的。

于 2015-08-12T13:30:58.293 回答
-1 
<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>
于 2013-10-11T12:05:46.980 回答