Como definir o foco para um campo específico em um modal de Bootstrap, uma vez que ele apareça

Eu já vi algumas perguntas em relação aos modais de autoinicialização, mas nenhuma exatamente como essa, então vou adiante.

Eu tenho um modal que eu chamo de onclick assim ...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

Isso funciona bem, mas quando eu mostro o modal, quero focar no primeiro elemento de entrada ... Nesse caso, o primeiro elemento de entrada tem um ID de #photo_name.

Então eu tentei

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

Mas isso não adiantou. Por fim, tentei vincular o evento 'show', mas, mesmo assim, a entrada não será focada. Por fim, apenas para teste, como eu suspeitava que fosse sobre a ordem de carregamento do js, ​​coloquei um setTimeout apenas para ver se eu atraso um segundo, o foco funcionará e, sim, funciona! Mas esse método é obviamente uma porcaria. Existe alguma maneira de ter o mesmo efeito que abaixo sem usar um setTimeout?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Tente isto

Aqui está a antiga DEMO :

EDIT: (Aqui está uma demonstração de trabalho com Bootstrap 3 e jQuery 1.8.3)

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

Para iniciar o bootstrap 3, é necessário usar o evento named.bs.modal:

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

Só queria dizer que o Bootstrap 3 lida com isso de maneira um pouco diferente. O nome do evento é "mostrado.bs.modal".

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

ou concentre-se na primeira entrada visível como esta:

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

Estou usando isso no meu layout para capturar todos os modais e focar na primeira entrada

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

Eu tive o mesmo problema com o bootstrap 3, foco quando clico no link, mas não quando acionar o evento com javascript. A solução:

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

Provavelmente é algo sobre a animação!

Eu tive problema para pegar o evento "shows.bs.modal" .. E esta é a minha solução que funciona perfeita ..

Em vez simples, em ():

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

Use on () com elemento delegado:

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

Parece que a animação modal está ativada ( fadena classe da caixa de diálogo), após chamar.modal('show') , a caixa de diálogo não fica imediatamente visível e, portanto, não é possível obter o foco no momento.

Posso pensar em duas maneiras de resolver esse problema:

1. Remover fadeda classe, para que a caixa de diálogo fique imediatamente visível após a chamada .modal('show'). Você pode ver http://codebins.com/bin/4ldqp7x/4 para obter uma demonstração. (Desculpe, @keyur, editei e salvei por engano como nova versão do seu exemplo)
2. Ligue focus()para showneventos como o que o @keyur escreveu.

Criei uma maneira dinâmica de chamar cada evento automaticamente. É perfeito para focar um campo, porque ele chama o evento apenas uma vez, removendo-o após o uso.

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

Você só precisa chamar o modalEvents()documento pronto.

Usar:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

Portanto, você pode usar o mesmo modal para carregar o que deseja, sem se preocupar em remover eventos sempre.

Eu tive o mesmo problema com o bootstrap 3 e resolvi assim:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

O Bootstrap adicionou um evento carregado.

https://getbootstrap.com/docs/3.3/javascript/#modals

capturar o evento 'loaded.bs.modal' no modal

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

Evento de apresentação modal de inicialização

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

})

Uma solução um pouco mais limpa e mais modular pode ser:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

Ou use seu ID como exemplo:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

Espero que ajude..