小编典典

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

all

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

我有一个模态,我称之为 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);
  });

阅读 56

收藏
2022-08-02

共1个答案

小编典典

尝试这个

这是旧的 演示

编辑:( 这是一个使用 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();
})
2022-08-02