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

IT技术 javascript twitter-bootstrap modal-dialog
2021-01-16 21:51:25

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

我有一个模态,我像这样调用 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);
  });
6个回答

试试这个

这是旧的演示

编辑:( 这是一个使用 Bootstrap 3 和 jQuery 1.8.3的工作演示

$(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();
})
okej,我应该使用“show.bs.modal”而不是“shown.bs.modal”
2021-03-17 21:51:25
谢谢你。我还没有看到“显示”事件。正是我要找的。
2021-03-18 21:51:25
谢谢!演示不再工作,但代码片段可以。
2021-04-04 21:51:25
关于焦点处理程序,它需要一点延迟,因此您必须将它放在像这样的 setInterval 中: setInterval(function() { $("#your-input").focus(); }, 50);
2021-04-08 21:51:25
@keyur at codebins.com 此事件在显示模态后开始,如果我必须在显示模态之前启动事件怎么办
2021-04-10 21:51:25

只是想说 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') 未显示,它对我有用
2021-03-19 21:51:25
我花了很多时间才看到它应该是“shown.bs...”而不是“show.bs...”。表演对我不起作用。实际上他们都在工作,他们是不同的事件。抱歉忽略我的第一句话。
2021-03-30 21:51:25
@PeterGraham 也许您正在使用引导程序 2?
2021-04-03 21:51:25

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

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });
甜的。我的第一个输入元素是隐藏的,所以我想我必须这样做: $(this).find('input:not([type=hidden])').focus();
2021-03-14 21:51:25
或者 $(this).find('input:visible').focus();
2021-03-15 21:51:25
应该是 $(this).find('input').first().focus() 如果你不想聚焦所有输入
2021-04-02 21:51:25

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

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

可能是动画的问题吧!

模态动画肯定会发生一些事情。即使我在选项中关闭模态淡出,如果在模态弹出窗口之后立即有 CPU 密集型任务,它也不会呈现。使用这个超时是我让它工作的唯一方法。
2021-04-11 21:51:25

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

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

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

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

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