Vermeiden Sie das modale Entlassen beim Drücken der Eingabetaste

107

Ich habe ein Bootstrap-Modal mit einem darin enthaltenen Formular eingerichtet. Ich habe gerade festgestellt, dass das Modal beim Drücken der Eingabetaste geschlossen wird. Gibt es eine Möglichkeit, es nicht zu schließen, wenn Sie die Eingabetaste drücken?

Ich habe versucht, das Modal mit der Tastatur zu aktivieren: false, aber das verhindert nur das Entlassen mit der ESC-Taste.

Luke Morgan
quelle
Ich mag diese Frage. Warum nicht einfach den Quellcode des Plugins bearbeiten?
Ryan
Ich werde einen Blick darauf werfen, wenn ich etwas Nützliches finde, werde ich es bearbeiten. In der Zwischenzeit hoffe ich, dass jemand die Antwort kennt.
Luke Morgan
Ich habe von click.dismiss.modal zu keyup gewechselt. Es scheint in Ordnung zu sein. Ich werde später noch einmal nachsehen, ob ich etwas anderes vermasselt habe
Luke Morgan
Ja, das hat die Tasten durcheinander gebracht (ich habe einen onclick = "$ ('# signinModal'). Modal ('hide');" hinzugefügt, um diese Probleme zu vermeiden, jetzt ist anscheinend alles in Ordnung)
Luke Morgan

Antworten:

121

Ich hatte gerade auch dieses Problem.
Mein Problem war, dass ich einen Schließknopf in meinem Modal hatte

<button class="close" data-dismiss="modal">&times;</button>

Durch Drücken der Eingabetaste im Eingabefeld wurde diese Taste ausgelöst. Ich habe es stattdessen in einen Anker geändert und es funktioniert jetzt wie erwartet (enter sendet das Formular und schließt das Modal nicht).

<a class="close" data-dismiss="modal">&times;</a>

Ohne Ihre Quelle zu sehen, kann ich jedoch nicht bestätigen, dass Ihre Ursache dieselbe ist.

vish
quelle
Nein, keine Schaltflächen verwendet, ich habe die <a> -Elemente verwendet, ich denke, es ist etwas anderes. Der Code, den ich verwende, ist im Grunde der Beispielcode auf der Bootstrap-Seite, nur mit einem Formular im Inneren
Luke Morgan
Ich habe den Knopf in der oberen rechten Ecke nicht gesehen, das war das Problem. Jetzt funktioniert es gut, danke!
Luke Morgan
+1, Ausgezeichneter Fund! Ich frage mich, ob jemand dies in den Bootstrap Issue Tracker gestellt hat. Ich bin im Moment zu faul, um das zu überprüfen. Vielleicht nach dem Mittagessen.
Andrew
8
Dies ist nicht nur ein Schaltflächenproblem. Ich habe alle Schaltflächen aus meinem Modal entfernt (einschließlich des oberen rechten "x"), aber wenn ich ein einzelnes Formulartextfeld habe, wird durch Drücken der Eingabetaste das Dialogfeld geschlossen. Seltsamerweise ist es nur dann ein Problem, wenn es nur ein einziges Textfeld gibt. Sobald ich zwei habe, entlässt Enter das Modell nicht, egal welches Feld den Fokus hat.
Jpeskin
11
man kann type = "button" auf der Abbrechen-Schaltfläche verwenden
Muayyad Alsadi
77

Einfach den Add type = „button“ Attribut auf das Button - Element, interpretieren einige Browser den Typ als einreichen standardmäßig.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

Dies gilt für alle Schaltflächen, die Sie im Modal haben.

<button type="button" class="close" data-dismiss="modal">×</button>
jcalonso
quelle
19

Ich hatte dieses Problem auch nach dem Entfernen ALLER Schaltflächen aus meinem Bootstrap Modal, daher half mir keine der hier aufgeführten Lösungen.

Ich habe festgestellt, dass ein Formular mit einem einzelnen Textfeld den Browser veranlasst, ein Formular zu senden (und zu schließen), wenn Sie die Eingabetaste drücken, während der Tastaturfokus auf dem Textfeld liegt. Dies scheint eher ein Browser- / Formularproblem zu sein als alles andere mit Bootstrap.

Meine Lösung bestand darin, das onsubmit-Attribut des Formulars auf onsubmit = "return false" zu setzen.

Dies kann ein Problem sein, wenn Sie das Submit-Ereignis tatsächlich verwenden, aber ich verwende JS-Frameworks, die AJAX-Anforderungen generieren, anstatt einen Browser-Submit durchzuführen. Daher ziehe ich es vor, Submit vollständig zu deaktivieren. (Es bedeutet auch, dass ich nicht jedes Formularelement, das eine Übermittlung auslösen könnte, manuell anpassen muss.)

Weitere Informationen hier: Modale Bootstrap-Dialoge mit einem einzelnen Texteingabefeld werden bei der Eingabetaste immer geschlossen

jpeskin
quelle
2
Ich hatte bereits type="button"alle meine Schaltflächen zum Schließen / Abbrechen aktiviert, hatte aber immer noch das Problem, dass die Eingabetaste mein Modal schloss. Ich hatte nur 1 Eingabetextfeld in meinem Modal, und Ihre Lösung hat es behoben. Danke für deine Antwort!
Darren Parker
7

Sie können die Anmeldeschaltfläche vor die Abbrechen-Schaltfläche setzen, um das Problem zu beheben, das Sie auch haben.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
Ryan
quelle
6
Abbrechen sollte nicht vom Typ
Submit sein
5

Ich hatte das gleiche Problem und habe es mit gelöst

<form onsubmit="return false;">

Es gibt jedoch noch eine weitere Lösung: Sie können unsichtbare Dummy-Eingaben hinzufügen, sodass Ihr Formular folgendermaßen aussehen würde:

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>
Igor Lovrić
quelle
3

Ich hatte gerade eine ähnliche Erfahrung und habe sie gelöst, anstatt ein Tag zu verwenden. Ich habe das Tag in ein Tag mit type = "button" geändert. Dies schien das Problem zu lösen, die Eingabetaste zu drücken und das Bootstrap-Modal zu schließen.

wmock
quelle
2

Ich hatte auch dieses Problem und habe es auf diese Weise gelöst. Ich habe onsubmit hinzugefügt, um zu bilden. Ich wollte auch in der Lage sein, die Eingabetaste als Speicherschlüssel zu verwenden, also fügte ich onsubmit save_stuff () Javascript hinzu. falsch zurückgeben; wird verwendet, um das Senden des Formulars zu verhindern.

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>
Firze
quelle