Evita l'eliminazione modale alla pressione del tasto Invio

Ho impostato un modale bootstrap con un modulo al suo interno, ho appena notato che quando premo il tasto Invio, il modale viene ignorato. C'è un modo per non chiuderlo premendo Invio?

Ho provato ad attivare il modale con la tastiera: false, ma questo impedisce il licenziamento solo con il tasto ESC.

Anch'io ho avuto questo problema.
Il mio problema era che avevo un pulsante di chiusura nel mio modale

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

La pressione di Invio nel campo di immissione ha causato l'attivazione di questo pulsante. L'ho cambiato in un ancoraggio e ora funziona come previsto (invio invia il modulo e non chiude il modale).

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

Senza vedere la tua fonte, non posso confermare che la tua causa sia la stessa.

Basta aggiungere l' attributo type = "button" all'elemento button, alcuni browser interpretano il tipo come submit per impostazione predefinita.

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

Questo vale per tutti i pulsanti che hai nel modale.

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

Ho avuto questo problema anche dopo aver rimosso TUTTI i pulsanti dal mio Bootstrap Modal, quindi nessuna delle soluzioni qui mi ha aiutato.

Ho scoperto che un modulo con un singolo campo di testo farebbe sì che il browser invii un modulo (e risulti chiuso), se premi Invio mentre lo stato attivo della tastiera è sul campo di testo. Questo sembra essere più un problema di browser / modulo di qualsiasi altra cosa con Bootstrap.

La mia soluzione era impostare l'attributo onsubmit del modulo su onsubmit = "return false"

Questo potrebbe essere un problema se stai effettivamente utilizzando l'evento submit, ma sto usando framework JS che generano richieste AJAX piuttosto che eseguire un submit del browser, quindi preferisco disabilitare completamente l'invio. (Significa anche che non devo modificare manualmente ogni elemento del modulo che potrebbe attivare un invio).

Maggiori informazioni qui: le finestre di dialogo modali Bootstrap con un singolo campo di immissione di testo si chiudono sempre con il tasto Invio

Puoi mettere il pulsante di accesso prima del pulsante di annullamento e questo risolverebbe anche il problema che stai riscontrando.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>

Ho avuto lo stesso problema e l'ho risolto con

<form onsubmit="return false;">

ma c'è un'altra soluzione, puoi aggiungere un input invisibile fittizio, quindi il tuo modulo sarebbe simile a questo:

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

Ho avuto un'esperienza simile proprio ora e il modo in cui l'ho risolto è stato invece di utilizzare un tag, ho cambiato il tag in un tag con type = "button". Questo sembrava risolvere il problema di premere il tasto "invio" e chiudere il bootstrap modal.

Anch'io ho avuto questo problema e l'ho risolto in questo modo. Ho aggiunto l'invio al modulo. Volevo anche essere in grado di utilizzare il tasto Invio come chiave di salvataggio, quindi ho aggiunto javascript save_stuff () a onsubmit. return false; viene utilizzato per impedire l'invio del modulo.

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

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