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

我已经看过几个关于bootstrap模态的问题,但没有一个完全像这样,所以我会继续.

我有一个模态,我打电话就像这样……

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

解决方法:

试试这个

这是旧的DEMO：

编辑：
(这是一个使用Bootstrap 3和jQuery 1.8.3的DEMO)

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

标签：javascript,twitter-bootstrap,modal-dialog
来源： https://codeday.me/bug/20190916/1808005.html