183

我已经看到了一些关于引导模式的问题，但没有一个完全像这样，所以我会继续。

我有一个模态，我称之为 onclick 像这样......

$(".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();
   });

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

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

11 回答 11

371

试试这个

这是旧的演示：

编辑：（ 这是一个使用 Bootstrap 3 和 jQuery 1.8.3的工作演示）

$(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();
})
于 2012-08-30T05:34:40.973 回答
75

只是想说 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

于 2013-08-02T13:38:48.213 回答
10

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

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });
于 2012-08-31T15:19:23.647 回答
9

我在 bootstrap 3 中遇到了同样的问题，当我单击链接时会聚焦，但在使用 javascript 触发事件时却没有。解决方案：

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

应该是动画的问题吧！

于 2014-11-05T14:19:51.397 回答
8

我在捕捉“shown.bs.modal”事件时遇到了问题。这是我完美的解决方案。

取而代之的是简单的 on()：

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

将 on() 与委托元素一起使用：

$('body').on 'shown.bs.modal', '#modal', ->
于 2015-01-08T22:12:08.397 回答
6

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

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

  1. 从类中移除fade，因此在调用.modal('show'). 您可以查看http://codebins.com/bin/4ldqp7x/4进行演示。（对不起@keyur，我错误地编辑并保存为您示例的新版本）
  2. 像@keyur 写focus()的那样调用事件。shown
于 2012-08-30T06:08:18.047 回答
4

我创建了一种动态方式来自动调用每个事件。聚焦一个领域是完美的，因为它只调用一次事件，使用后将其删除。

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();
});

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

于 2016-01-19T20:19:05.233 回答
3

我在 bootstrap 3 上遇到了同样的问题，并解决了这样的问题：

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

$('#myModal').modal('show').trigger('shown');
于 2014-05-24T02:20:54.120 回答
0

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
})
于 2017-12-20T11:34:05.213 回答
0

Bootstrap 模态显示事件

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

})

于 2017-12-21T14:23:09.003 回答
-1

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

$(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();
    });  
});

希望有帮助..

于 2013-03-07T19:43:20.383 回答