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

modal bootstrap ejemplos

Question

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

Tengo un modal al que llamo por clic como tal ...

$(".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 este caso, 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 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

Bootstrap agregó 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
})

Answer 2

Creé 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 a modalEvents() en el 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 todo el tiempo.

Answer 3

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();
  });

Answer 4

Evento de espectáculo modal de Bootstrap

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

})

Answer 5

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

Puedo pensar en dos formas de resolver este problema:

1. Elimine el fade de la clase, por lo que el cuadro de diálogo se puede ver inmediatamente después de llamar a .modal(''show'') . Puedes ver http://codebins.com/bin/4ldqp7x/4 para la demostración. (Lo siento @keyur, edité y guardé por error una nueva versión de tu ejemplo)
2. Llamar a focus() en el evento shown como lo que @keyur escribió.

Answer 6

Prueba esto

Aquí está la vieja DEMO :

EDITAR: (Aquí hay una DEMO funciona 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 7

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 ponga 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

Answer 8

Tuve el mismo problema con bootstrap 3, centrarme 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 es algo sobre la animación!

Answer 9

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'');

Answer 10

Tuve un problema para atrapar el evento "shown.bs.modal". Y esta es mi solución, que funciona perfecto.

En lugar de simple en ():

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

Use on () con elemento delegado:

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

Answer 11

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..