Question

我已经看过几个关于bootstrap模态的问题，但没有一个完全像这样，所以我会继续。

我有一个模态我打电话就像这样...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

这很好用，但是当我显示模态时我想要专注于第一个输入元素...在可能的情况下，第一个输入元素的id为#photo_name。

所以我试过

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

但这无济于事。最后，我尝试绑定到'show'事件，但即便如此，输入也不会集中。最后只是为了测试，因为我怀疑这是关于js加载顺序，我放入一个setTimeout只是为了看看我是否延迟了一秒，焦点是否有效，是的，它有效！但这种方法显然是废话。有没有办法在不使用setTimeout的情况下获得与下面相同的效果？

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Answer 1

试试这个

以下是旧DEMO：

修改（这是一个使用Bootstrap 3和jQuery 1.8.3的工作DEMO）

$(document).ready(function() { $('#modal-content').modal('show'); $('#modal-content').on('shown', function() { $("#txtname").focus(); }) });

启动bootstrap 3需要使用shown.bs.modal事件：

$('#modal-content').on('shown.bs.modal', function() { $("#txtname").focus(); })

Answer 2

只是想说Bootstrap 3处理这个问题有点不同。事件名称为“shown.bs.modal”。

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

或将焦点放在第一个可见输入上，如下所示：

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

Answer 3

我在布局中使用它来捕捉所有模态并专注于第一个输入

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

Answer 4

我遇到了与bootstrap 3相同的问题，当我点击链接时焦点，但是当用javascript触发事件时没有。解决方案：

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

可能是关于动画的东西！

Answer 5

我有问题去捕捉“shown.bs.modal”事件..这是我的解决方案，它完美无缺。

相反简单的on（）：

$('#modal').on 'shown.bs.modal', ->

将on（）与委托元素一起使用：

$('body').on 'shown.bs.modal', '#modal', ->

Answer 6

似乎是因为模式动画已启用（对话框的类中为fade），在调用.modal('show')后，对话框不会立即可见，因此此时无法获得焦点。

我可以想出两种方法来解决这个问题：

从班级中删除fade，以便在调用.modal('show')后立即显示该对话框。您可以看到http://codebins.com/bin/4ldqp7x/4进行演示。（抱歉@keyur，我错误地编辑并保存为您的示例的新版本）
在focus()事件中调用shown，就像@keyur写的一样。

Answer 7

我创建了一种自动调用每个事件的动态方法。它非常适合聚焦一个领域，因为它只调用一次事件，在使用后将其删除。

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

您只需在文档就绪时调用modalEvents()。

使用：

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

因此，您可以使用相同的模式加载您想要的内容而无需担心每次都删除事件。

Answer 8

我遇到了与bootstrap 3相同的问题并且解决了这样的问题：

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

Answer 9

Bootstrap添加了一个已加载的事件。

https://getbootstrap.com/docs/3.3/javascript/#modals

捕捉模态

上的'loaded.bs.modal'事件

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

Answer 10

Bootstrap模态显示事件

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

}）

Answer 11

更清洁，更模块化的解决方案可能是：

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

或者使用您的ID作为示例：

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

希望有所帮助..

一旦出现，如何在Bootstrap模态中设置特定字段的焦点

11 个答案: