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

Posted 2023-02-22

【中文标题】一旦出现，如何在 Bootstrap 模式中为特定字段设置焦点

【英文标题】：How to set the focus for a particular field in a Bootstrap modal, once it appears

【发布时间】：2012-08-24 18:46:55

【问题描述】：

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

我有一个我称之为 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();
   );

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

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

【参考方案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需要使用showed.bs.modal事件：

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

【讨论】：

谢谢。我没有看到“显示”事件。正是我想要的。

谢谢！演示不再工作，但 sn-p 可以。

@keyur at codebins.com 此事件在模态显示后开始，如果我必须在模态显示之前开始事件怎么办

okej，我应该使用“show.bs.modal”而不是“shown.bs.modal”

关于焦点处理程序，它需要一点延迟，所以你必须把它放在 setInterval 这样的东西中： setInterval(function() $("#your-input").focus(); , 50);

【参考方案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

【讨论】：

如果我使用 .on('show.bs.modal') 未显示它对我有用

我花了很多时间才看到它应该是“shown.bs ...”而不是“show.bs ...”。显示对我不起作用。实际上他们都在工作，他们是不同的事件。抱歉忽略我的第一句话。

@PeterGraham 也许您正在使用引导程序 2？

【参考方案3】：

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

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

【讨论】：

甜蜜。我的第一个输入元素是隐藏的，所以我想我必须这样做： $(this).find('input:not([type=hidden])').focus();

或$(this).find('input:visible').focus();

如果你不想关注所有输入，应该是 $(this).find('input').first().focus()

【参考方案4】：

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

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

可能与动画有关！

【讨论】：

模态动画肯定有问题。即使我在选项中关闭模态淡入淡出，如果在模态弹出后立即有 CPU 密集型任务，它也不会呈现。使用此超时是我让它工作的唯一方法。

【参考方案5】：

我无法捕捉“shown.bs.modal”事件。这是我的完美解决方案。

而不是简单的on()：

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

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

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

【参考方案6】：

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

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

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

【讨论】：

谢谢。我希望我可以将两个答案标记为正确的：p。是的，我什至不希望“淡入淡出”生效，所以删除它是可行的。我删除了淡入淡出并添加了显示的事件。

【参考方案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();
);

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

【讨论】：

这就是我需要的！谢谢大哥！

【参考方案8】：

我在使用 bootstrap 3 时遇到了同样的问题，并像这样解决了：

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

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

【参考方案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
)

【参考方案10】：

引导模式显示事件

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

)

【参考方案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();
    );  
);

希望对您有所帮助..

【讨论】：

没有这样的功能成功。