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

182

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);
  });
jdkealy
źródło

Odpowiedzi:

371

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();
})
gaurang171
źródło
3
Dziękuję Ci. Nie widziałem wydarzenia „pokazanego”. Dokładnie tego szukałem.
jdkealy
dzięki! demo już nie działa, ale fragment kodu działa.
Kreker
@keyur at codebins.com To wydarzenie rozpoczyna się po wyświetleniu modalu, co jeśli muszę rozpocząć wydarzenie przed wyświetleniem modalu
Thomas Shelby
okej, powinienem użyć „show.bs.modal” zamiast „pokazanego.bs.modal”
Thomas Shelby
jeśli chodzi o moduł obsługi fokusa, wymaga to nieco opóźnienia, więc należy go ustawić w takich rzeczach jak setInterval: setInterval (function () {$ ("# your-input"). focus ();}, 50);
Nguyen Minh Hien
76

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

David Beck
źródło
Działa dla mnie, gdybym użył .on ('show.bs.modal') nie pokazano
Peter Graham
Zajęło mi to dużo czasu, zanim zobaczyłem, że powinno być „pokazane.bs ...” zamiast „show.bs ...”. Show nie działało dla mnie. W rzeczywistości ich oboje działają i są to różne wydarzenia. Przepraszam, zignoruj ​​moje pierwsze zdanie.
Vladyn
@PeterGraham może używasz bootstrap 2?
FindOutIslamNow
10

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();
  });
Joe Beams
źródło
Słodkie. Mój pierwszy element wejściowy jest jednak ukryty, więc myślę, że musiałbym zrobić: $ (this) .find ('input: not ([type = hidden])'). Focus ();
jdkealy
2
Lub$(this).find('input:visible').focus();
Stephan Muller,
2
powinno być $ (this) .find ('input'). first (). focus () jeśli nie chcesz skupiać się na wszystkich wejściach
Jacek Pietal
9

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ę!

Alejandro Fiore
źródło
Z pewnością coś się dzieje z animacją modalną. Nawet jeśli wyłączę modalne zanikanie w opcjach, nie wyrenderuje się, jeśli zaraz po wyskakującym modalnym pojawi się zadanie wymagające dużej mocy procesora. Wykorzystanie tego limitu czasu jest jedynym sposobem, w jaki mogę go uruchomić.
krx,
8

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', ->
Michał Macejko
źródło
6

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.
SAPikachu
źródło
Dziękuję Ci. Chciałbym oznaczyć dwie odpowiedzi jako corrent: s. Tak, nawet nie chciałem efektu „zanikania”, więc usunięcie go działa. Usunąłem przenikanie i dodałem pokazane zdarzenie.
jdkealy
4

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.

Danilo Colasso
źródło
To jest to, czego potrzebuję! Dzięki stary!
Deweloper
3

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');
edercortes
źródło
0

Modalne zdarzenie pokazujące bootstrap

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

})

AdminDev826
źródło
-1

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

wskrzesić
źródło
Brak takiej funkcji powodzenia.
Avinash,