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

Solo quería decir que Bootstrap 3 maneja esto de manera 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 de esta manera:

.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, enfocarme cuando hago clic en el enlace, pero no cuando disparo el evento con javascript. La solución:

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

Probablemente es algo acerca de la animación!

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

En lugar de simple on ():

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

Use on () con elemento delegado:

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

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

Se me ocurren dos maneras de resolver este problema:

1. Remove fade from class, por lo que el diálogo es visible inmediatamente después de llamar a .modal('show'). Puedes ver http://codebins.com/bin/4ldqp7x/4 para demo. (Lo siento @ keyur, por error edité y guardé como nueva versión de su ejemplo)
2. Llama a focus() en el evento shown como lo que escribió @keyur.

He creado una forma dinámica de llamar a cada evento automáticamente. Es perfecto para enfocar un campo, ya que llama al evento solo una vez, quitá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 tiene que llamar a modalEvents() en el documento listo.

Uso:

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

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

Tuve el mismo problema con el bootstrap 3 y resuelto así:

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

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

Bootstrap ha añadido un evento cargado.

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

Captura 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
})

Bootstrap modal show event

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

})

Una solución un poco más limpia y 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 eso ayude..