Cómo establecer el foco para un campo en particular en un modo Bootstrap, una vez que aparece

He visto un par de preguntas con respecto a los modales de bootstrap, pero ninguna exactamente como esta, así que seguiré adelante.

Tengo un modal que llamo onclick así ...

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

Esto funciona bien, pero cuando muestro el modal quiero centrarme en el primer elemento de entrada ... En muchos casos, el primer elemento de entrada tiene una identificación de #photo_name.

Así que lo intenté

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

Pero esto fue en vano. Por último, traté de vincularme al evento 'show' pero aun así, la entrada no se enfocará. Por último, solo para probar, ya que sospechaba que se trataba del orden de carga de js, puse un setTimeout solo para ver si me demoraba un segundo, ¿funcionará el enfoque, y sí, funciona! Pero este método es obviamente una porquería. ¿Hay alguna manera de tener el mismo efecto que a continuación sin usar un setTimeout?

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

Prueba esto

Aquí está la vieja DEMO :

EDITAR: (Aquí hay una DEMO que funciona con Bootstrap 3 y jQuery 1.8.3)

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

El arranque de bootstrap 3 debe usar el evento shown.bs.modal:

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

Solo quería decir que Bootstrap 3 maneja esto un poco diferente. El nombre del evento es "shown.bs.modal".

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

o poner el foco en la primera entrada visible como esta:

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

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

Estoy usando esto en mi diseño para capturar todos los modales y enfocarme en la primera entrada

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

Tuve el mismo problema con bootstrap 3, enfóqueme cuando hago clic en el enlace, pero no cuando desencadenar el evento con javascript. La solución:

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

¡Probablemente sea algo sobre la animación!

Tuve problemas para detectar el evento "shown.bs.modal" ... Y esta es mi solución que funciona perfectamente ...

En cambio simple en ():

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

Usar en () con elemento delegado:

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

Parece que es porque la animación modal está habilitada ( fadeen la clase del cuadro de diálogo), después de llamar .modal('show'), el cuadro de diálogo no es visible de inmediato, por lo que no puede enfocarse en este momento.

Se me ocurren dos formas de resolver este problema:

1. Eliminar fadede la clase, de modo que el diálogo sea visible inmediatamente después de llamar .modal('show'). Puede ver http://codebins.com/bin/4ldqp7x/4 para la demostración. (Lo siento @keyur, edité y guardé por error como nueva versión de tu ejemplo)
2. Llame focus()en showncaso de lo que escribió @keyur.

He creado una forma dinámica de llamar a cada evento automáticamente. Es perfecto para enfocar un campo, porque llama al evento solo una vez, eliminándolo después de su 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');
            }
        });
    });
}

Solo necesita llamar modalEvents()al documento listo.

Utilizar:

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

Por lo tanto, puede usar el mismo modal para cargar lo que desee sin preocuparse por eliminar eventos cada vez.

Tuve el mismo problema con el bootstrap 3 y lo resolví así:

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

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

Bootstrap ha agregado un evento cargado.

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

capturar el evento 'loaded.bs.modal' en el modal

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

Evento de espectáculo modal Bootstrap

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

})

Una solución un poco más limpia y más modular podría ser:

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

O usando su ID como ejemplo en su lugar:

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

Espero que ayude..