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

Question

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

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

但这无济于事。最后，我尝试绑定(bind)到“显示”事件，但即便如此，输入也不会集中。最后只是为了测试，因为我怀疑这是关于 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需要使用showed.bs.modal事件:

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