Jak ustawić fokus dla konkretnego pola w modale Bootstrap, gdy tylko się pojawi

Widziałem kilka pytań dotyczących modów bootstrap, ale nie dokładnie tak, więc pójdę dalej.

Mam modal, który nazywam kliknięciem tak ...

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

Działa to dobrze, ale kiedy pokazuję modal, chcę skupić się na pierwszym elemencie wejściowym ... Może pierwszy element wejściowy ma identyfikator #photo_name.

Więc próbowałem

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

Ale to nie pomogło. Wreszcie próbowałem powiązać zdarzenie „show”, ale mimo to dane wejściowe nie będą się koncentrować. Na koniec tylko do testowania, ponieważ miałem suspiscion, chodzi o kolejność ładowania js, ustawiłem setTimeout, aby zobaczyć, czy opóźnię sekundę, czy fokus zadziała i tak, działa! Ale ta metoda jest oczywiście bzdura. Czy jest jakiś sposób na uzyskanie takiego samego efektu jak poniżej bez użycia setTimeout?

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

Spróbuj tego

Oto stare DEMO :

EDYCJA: (Oto działające DEMO z Bootstrap 3 i jQuery 1.8.3)

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

Uruchamiając bootstrap 3 należy użyć zdarzenia pokazanego.bs.modal:

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

Chciałem tylko powiedzieć, że Bootstrap 3 traktuje to nieco inaczej. Nazwa zdarzenia to „pokazano.bs.modal”.

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

lub skoncentruj się na pierwszym widocznym wejściu w ten sposób:

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

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

Używam tego w moim układzie do przechwytywania wszystkich modów i skupienia się na pierwszym wejściu

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

Miałem ten sam problem z bootstrap 3, skupiałem się, kiedy klikam link, ale nie, gdy wyzwalam zdarzenie za pomocą javascript. Rozwiązanie:

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

Prawdopodobnie chodzi o animację!

Miałem problem z złapaniem zdarzenia „pokazano.bs.modal”. I to jest moje rozwiązanie, które działa idealnie ..

Zamiast prostego on ():

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

Użyj on () z delegowanym elementem:

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

Wydaje się, że dzieje się tak, ponieważ animacja modalna jest włączona ( fadew klasie okna dialogowego), po wywołaniu .modal('show')okno dialogowe nie jest natychmiast widoczne, więc nie można w tym momencie ustawić ostrości.

Mogę wymyślić dwa sposoby rozwiązania tego problemu:

1. Usuń fadez klasy, aby okno dialogowe było natychmiast widoczne po wywołaniu .modal('show'). Możesz zobaczyć http://codebins.com/bin/4ldqp7x/4 na demo. (Przepraszamy, @keyur, przez pomyłkę edytowałem i zapisałem jako nową wersję Twojego przykładu)
2. Zadzwoń focus()w shownprzypadku, jak napisał @keyur.

Stworzyłem dynamiczny sposób automatycznego wywoływania każdego zdarzenia. Idealnie jest skupić pole, ponieważ wywołuje zdarzenie tylko raz, usuwając je po użyciu.

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

Wystarczy zadzwonić modalEvents()na gotowy dokument.

Posługiwać się:

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

Możesz więc użyć tego samego modalu, aby załadować to, co chcesz, bez obaw o usuwanie zdarzeń za każdym razem.

Miałem ten sam problem z bootstrap 3 i rozwiązałem w ten sposób:

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

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

Bootstrap dodał załadowane zdarzenie.

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

przechwytywanie zdarzenia „load.bs.modal” na module

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

Modalne zdarzenie pokazujące bootstrap

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

})

Trochę czystszym i bardziej modułowym rozwiązaniem może być:

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

Lub zamiast tego użyj swojego identyfikatora jako przykładu:

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

Mam nadzieję, że to pomoże ..