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

Question

He visto un par de preguntas con respecto a los modos de arranque, pero ninguno exactamente así, así que seguiré adelante.

que tienen un referente al que llamo onclick así ...

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

Esto funciona bien, pero cuando muestro el modal me quiero centrar en el primer elemento de entrada ... En caso de que el puede primer elemento de entrada tiene una identificación de #photo_name.

así que traté

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

pero esto fue en vano. Por último, traté de enlazar al evento 'show' pero aun así, la entrada no se enfocará. Por último, solo para probar, ya que tenía una sospecha de que se trataba del orden de carga js, puse un setTimeout solo para ver si me demoraba un segundo, el foco funcionaría, y sí, ¡funciona! Pero este método es obviamente una mierda. ¿Hay alguna forma 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); 
    }); 

Answer 1

probar este

Aquí está la vieja DEMO:

EDIT: (que aquí hay una DEMO trabajar con Bootstrap 3 y jQuery 1.8.3)

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

Al iniciar el bootstrap 3 es necesario utilizar el evento shown.bs.modal:

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

Answer 2

parece que se debe a que la animación está activada modal (fade en la clase del cuadro de diálogo), después de llamar .modal('show'), el diálogo no es inmediatamente visible, por lo que no se puede obtener el foco en este momento.

Se me ocurren dos maneras de resolver este problema:

1. Retire fade de la clase, por lo que el diálogo es 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. Llamada focus() en shown evento como lo que @keyur escribió.

Answer 3

estoy usando esto en mi diseño para capturar todos los modales y se centran en la primera entrada

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

Answer 4

un poco más limpio y una solución más modular podría ser:

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

o utilizar su ID como ejemplo:

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

Hope eso ayuda ..

Answer 5

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

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

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

Answer 6

que tenía el mismo problema con el sistema de arranque 3 y resolverse así:

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

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

Answer 7

Tuve el mismo problema con bootstrap 3, foco cuando hago clic en el enlace, pero no cuando t organizar 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!

Answer 8

tuve problema para coger evento "shown.bs.modal" .. Y esta es mi solución que funciona perfecto ..

En cambio simple en():

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

uso de() con elemento delegado:

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

Answer 9

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 al modalEvents() en el documento listo.

Uso:

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

tanto, se puede utilizar el mismo modal para cargar lo que quiere sin preocuparse por eliminar eventos en todo momento.

Answer 10

Bootstrap ha añadido un evento cargado.

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

captura el evento 'loaded.bs.modal' en la modal

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

Answer 11

Bootstrap espectáculo modal caso

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

})