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);
});
Ich wollte nur sagen, dass Bootstrap 3 dies etwas anders handhabt. Der Ereignisname lautet "selected.bs.modal".
oder konzentrieren Sie sich auf die erste sichtbare Eingabe wie folgt:
http://getbootstrap.com/javascript/#modals
quelle
Ich verwende dies in meinem Layout, um alle Modalitäten zu erfassen und mich auf die erste Eingabe zu konzentrieren
quelle
$(this).find('input:visible').focus();
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:
Wahrscheinlich geht es um die Animation!
quelle
Ich hatte ein Problem beim Abfangen des Ereignisses "gezeigt.bs.modal". Und dies ist meine Lösung, die perfekt funktioniert.
Stattdessen einfach auf ():
Verwenden Sie on () mit delegiertem Element:
quelle
Dies liegt anscheinend daran, dass die modale Animation aktiviert ist (
fade
in 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:
fade
Aus 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)focus()
einshown
Ereignis an, wie es @keyur geschrieben hat.quelle
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.
Sie müssen nur das
modalEvents()
Dokument bereit aufrufen .Verwenden:
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.
quelle
Ich hatte das gleiche Problem mit dem Bootstrap 3 und löste es folgendermaßen:
quelle
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
quelle
Bootstrap Modal Show Event
})
quelle
Eine etwas sauberere und modularere Lösung könnte sein:
Oder verwenden Sie stattdessen Ihre ID als Beispiel:
Hoffentlich hilft das..
quelle