Come impostare lo stato attivo per un determinato campo in un Bootstrap modale, una volta visualizzato

Ho visto un paio di domande riguardo alle modali bootstrap, ma nessuna esattamente così, quindi andrò avanti.

Ho un modale che chiamo onclick in questo modo ...

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

Funziona bene, ma quando mostro il modale voglio concentrarmi sul primo elemento di input ... In tal caso il primo elemento di input ha un ID di #photo_name.

Quindi ci ho provato

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

Ma questo è stato inutile. Infine, ho provato a collegarmi all'evento "show", ma anche così, l'input non si focalizzerà. Infine, solo per i test, dato che avevo il sospetto che si trattasse dell'ordine di caricamento js, ​​ho inserito un setTimeout solo per vedere se ritardare un secondo, la messa a fuoco funzionerà e sì, funziona! Ma questo metodo è ovviamente una schifezza. C'è un modo per avere lo stesso effetto di seguito senza utilizzare un setTimeout?

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

Prova questo

Ecco la vecchia DEMO :

EDIT: (Ecco una DEMO funzionante con Bootstrap 3 e jQuery 1.8.3)

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

Per avviare bootstrap 3 è necessario utilizzare l'evento illustrato.bs.modal:

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

Volevo solo dire che Bootstrap 3 lo gestisce in modo leggermente diverso. Il nome dell'evento è "illustrato.bs.modal".

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

o focalizzare l'attenzione sul primo input visibile in questo modo:

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

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

Sto usando questo nel mio layout per catturare tutti i modali e concentrarmi sul primo input

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

Ho avuto lo stesso problema con bootstrap 3, focus quando faccio clic sul collegamento, ma non quando innesco l'evento con javascript. La soluzione:

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

Probabilmente è qualcosa sull'animazione!

Ho avuto problemi a catturare l'evento "shows.bs.modal" .. E questa è la mia soluzione che funziona perfettamente ..

Invece semplice su ():

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

Utilizzare on () con elemento delegato:

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

Sembra che l'animazione modale sia abilitata ( fadenella classe della finestra di dialogo), dopo la chiamata .modal('show'), la finestra di dialogo non è immediatamente visibile, quindi non può essere messa a fuoco in questo momento.

Posso pensare a due modi per risolvere questo problema:

1. Rimuovi fadedalla classe, quindi la finestra di dialogo è immediatamente visibile dopo la chiamata .modal('show'). Puoi vedere http://codebins.com/bin/4ldqp7x/4 per la demo. (Scusa @keyur, ho erroneamente modificato e salvato come nuova versione del tuo esempio)
2. Chiama focus()in un shownevento come quello che ha scritto @keyur.

Ho creato un modo dinamico per chiamare automaticamente ogni evento. È perfetto per focalizzare un campo, perché chiama l'evento una volta sola, rimuovendolo dopo l'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');
            }
        });
    });
}

Hai solo bisogno di chiamare modalEvents()pronto per il documento.

Uso:

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

Quindi, puoi utilizzare lo stesso modale per caricare ciò che desideri senza preoccuparti di rimuovere gli eventi ogni volta.

Ho avuto lo stesso problema con il bootstrap 3 e risolto in questo modo:

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

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

Bootstrap ha aggiunto un evento caricato.

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

cattura l'evento 'loaded.bs.modal' sul modale

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

Evento spettacolo modale Bootstrap

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

})

Una soluzione un po 'più pulita e modulare potrebbe essere:

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

O usando invece il tuo ID come esempio:

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

Spero che aiuti..