So legen Sie den Fokus für ein bestimmtes Feld in einem Bootstrap-Modal fest, sobald es angezeigt wird

182

Ich habe ein paar Fragen in Bezug auf Bootstrap-Modalitäten gesehen, aber keine genau so, also werde ich weitermachen.

Ich habe ein Modal, das ich onclick so nenne ...

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

Dies funktioniert gut, aber wenn ich das Modal zeige, möchte ich mich auf das erste Eingabeelement konzentrieren ... In diesem Fall hat das erste Eingabeelement die ID #photo_name.

Also habe ich es versucht

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

Aber das war ohne Erfolg. Zuletzt habe ich versucht, mich an das 'show'-Ereignis zu binden, aber trotzdem wird die Eingabe nicht fokussiert. Zuletzt nur zum Testen, da ich den Verdacht hatte, dass es sich um die js-Ladereihenfolge handelt, habe ich ein setTimeout eingegeben, um zu sehen, ob ich eine Sekunde verzögere, ob der Fokus funktioniert, und ja, es funktioniert! Aber diese Methode ist offensichtlich Mist. Gibt es eine Möglichkeit, den gleichen Effekt wie unten zu erzielen, ohne ein setTimeout zu verwenden?

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

Antworten:

371

Versuche dies

Hier ist die alte DEMO :

EDIT: (Hier ist eine funktionierende DEMO mit Bootstrap 3 und jQuery 1.8.3)

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

Zum Starten von Bootstrap 3 muss das Ereignis "found.bs.modal" verwendet werden:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})
gaurang171
quelle
3
Danke dir. Ich hatte das "gezeigte" Ereignis nicht gesehen. Genau das, wonach ich gesucht habe.
jdkealy
Vielen Dank! Die Demo funktioniert nicht mehr, das Snippet jedoch.
Kreker
@keyur at codebins.com Dieses Ereignis beginnt, nachdem Modal angezeigt wird. Was ist, wenn ich das Ereignis starten muss, bevor Modal angezeigt wird?
Thomas Shelby
okej, ich sollte 'show.bs.modal' anstelle von 'gezeigt.bs.modal' verwenden
Thomas Shelby
Für den Fokus-Handler ist eine gewisse Verzögerung erforderlich, Sie müssen dies jedoch in einem setInterval-Material wie dem folgenden tun: setInterval (function () {$ ("# your-input"). focus ();}, 50);
Nguyen Minh Hien
76

Ich wollte nur sagen, dass Bootstrap 3 dies etwas anders handhabt. Der Ereignisname lautet "selected.bs.modal".

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

oder konzentrieren Sie sich auf die erste sichtbare Eingabe wie folgt:

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

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

David Beck
quelle
Es hat bei mir funktioniert, wenn ich .on ('show.bs.modal') nicht gezeigt habe
Peter Graham
Es hat viel Zeit gekostet, als ich sah, dass "show.bs ..." anstelle von "show.bs ..." angezeigt werden sollte. Show hat bei mir nicht funktioniert. Eigentlich arbeiten beide und sie sind verschiedene Ereignisse. Entschuldigung, ignoriere meinen ersten Satz.
Vladyn
@ PeterGraham Vielleicht benutzt du Bootstrap 2?
FindOutIslamNow
10

Ich verwende dies in meinem Layout, um alle Modalitäten zu erfassen und mich auf die erste Eingabe zu konzentrieren

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });
Joe Beams
quelle
Süss. Mein erstes Eingabeelement ist jedoch ausgeblendet, daher müsste ich Folgendes tun: $ (this) .find ('input: not ([type = hidden])'). Focus ();
jdkealy
2
Oder$(this).find('input:visible').focus();
Stephan Müller
2
sollte $ (this) .find ('input'). first (). focus () sein, wenn Sie nicht alle Eingaben fokussieren möchten
Jacek Pietal
9

Ich hatte das gleiche Problem mit Bootstrap 3, Fokus, wenn ich auf den Link klicke, aber nicht, wenn das Ereignis mit Javascript ausgelöst wird. Die Lösung:

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

Wahrscheinlich geht es um die Animation!

Alejandro Fiore
quelle
Mit der modalen Animation ist definitiv etwas los. Selbst wenn ich die modale Überblendung in den Optionen ausschalte, wird sie nicht gerendert, wenn direkt nach dem modalen Popup eine CPU-intensive Aufgabe vorliegt. Nur mit diesem Timeout kann ich es zum Laufen bringen.
krx
8

Ich hatte ein Problem beim Abfangen des Ereignisses "gezeigt.bs.modal". Und dies ist meine Lösung, die perfekt funktioniert.

Stattdessen einfach auf ():

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

Verwenden Sie on () mit delegiertem Element:

$('body').on 'shown.bs.modal', '#modal', ->
Michal Macejko
quelle
6

Dies liegt anscheinend daran, dass die modale Animation aktiviert ist ( fadein der Klasse des Dialogfelds). Nach dem Aufruf .modal('show')ist das Dialogfeld nicht sofort sichtbar, sodass es zu diesem Zeitpunkt nicht fokussiert werden kann.

Ich kann mir zwei Möglichkeiten vorstellen, um dieses Problem zu lösen:

  1. fadeAus der Klasse entfernen , damit der Dialog sofort nach dem Aufruf sichtbar wird .modal('show'). Sie können http://codebins.com/bin/4ldqp7x/4 für die Demo sehen. (Sorry @keyur, ich habe fälschlicherweise bearbeitet und als neue Version Ihres Beispiels gespeichert)
  2. Rufen Sie focus()ein shownEreignis an, wie es @keyur geschrieben hat.
SAPikachu
quelle
Danke dir. Ich wünschte, ich könnte zwei Antworten als korrupt markieren: p. Ja, ich wollte nicht einmal, dass das "Fade" wirksam wird, also funktioniert das Entfernen. Ich habe Fade entfernt und das angezeigte Ereignis hinzugefügt.
jdkealy
4

Ich habe eine dynamische Methode erstellt, um jedes Ereignis automatisch aufzurufen. Es ist perfekt, um ein Feld zu fokussieren, da es das Ereignis nur einmal aufruft und es nach der Verwendung entfernt.

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

Sie müssen nur das modalEvents()Dokument bereit aufrufen .

Verwenden:

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

Sie können also dasselbe Modal verwenden, um das zu laden, was Sie möchten, ohne sich jedes Mal Gedanken über das Entfernen von Ereignissen machen zu müssen.

Danilo Colasso
quelle
Das ist was ich brauche! Dank bro!
Entwickler
3

Ich hatte das gleiche Problem mit dem Bootstrap 3 und löste es folgendermaßen:

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

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

Bootstrap hat ein geladenes Ereignis hinzugefügt.

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

Erfassen Sie das Ereignis 'load.bs.modal' auf dem Modal

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

Bootstrap Modal Show Event

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

})

AdminDev826
quelle
-1

Eine etwas sauberere und modularere Lösung könnte sein:

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

Oder verwenden Sie stattdessen Ihre ID als Beispiel:

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

Hoffentlich hilft das..

beleben
quelle
Kein solcher Funktionserfolg.
Avinash