Vermeiden Sie das modale Entlassen beim Drücken der Eingabetaste

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.

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.

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>

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

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>

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>

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.

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>