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

javascript twitter-bootstrap modal-dialog

2022-08-30 01:45:16

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

我有一个模态，我像这样调用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

试试这个

这是旧的演示：

编辑：（这是Bootstrap 3和jQuery 1.8.3的工作演示）

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

启动 bootstrap 3 需要使用 show.bs.modal event：

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

答案 2

只是想说Bootstrap 3处理这个问题的方式有点不同。事件名称为“show.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