web-dev-qa-db-fra.com

Eviter le renvoi modal lors de la frappe au clavier

J'ai mis en place un bootstrap modal avec un formulaire à l'intérieur de celui-ci, je viens de remarquer que lorsque j'appuie sur la touche Entrée, le modal est ignoré. Y a-t-il un moyen de ne pas le faire lorsque vous appuyez sur Entrée?

J'ai essayé d'activer le modal avec le clavier: faux, mais cela empêche seulement le renvoi avec la touche ESC.

formstwitter-bootstrapmodal-dialog
101
Luke Morgan

J'ai juste eu ce problème aussi.
Mon problème était que j'avais un bouton de fermeture dans mon modal

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

Appuyez sur enter dans le champ de saisie pour déclencher le déclenchement de cette touche. Je l'ai changé en une ancre et cela fonctionne comme prévu maintenant (enter soumet le formulaire et ne ferme pas le modal).

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

Sans voir votre source, je ne peux pas confirmer que votre cause est la même.

114
vish

Ajoutez simplement l'attribut type = "button" à l'élément button, certains navigateurs interprètent le type comme submit par défaut.

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

Ceci s'applique à tous les boutons que vous avez dans le modal.

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

J'ai eu ce problème même après avoir supprimé TOUS les boutons de mon Bootstrap Modal, aucune des solutions ici ne m'a aidé.

J'ai constaté qu'un formulaire avec un seul champ de texte obligerait le navigateur à le soumettre (et à le renvoyer), si vous appuyez sur la touche Entrée alors que le focus du clavier est sur le champ de texte. Cela semble être plus un problème de navigateur/formulaire que n'importe quoi avec Bootstrap.

Ma solution était de définir l'attribut onsubmit du formulaire sur onsubmit = "return false"

Cela peut poser un problème si vous utilisez réellement submit, mais j'utilise des frameworks JS qui génèrent des requêtes AJAX plutôt que de soumettre le navigateur, je préfère donc désactiver complètement la soumission. signifie également que je n'ai pas à modifier manuellement chaque élément de formulaire susceptible de déclencher une soumission).

Plus d'infos ici: Les dialogues modaux Bootstrap avec un seul champ de saisie de texte sont toujours ignorés lorsque vous appuyez sur la touche Entrée

19
jpeskin

Vous pouvez placer le bouton de connexion avant le bouton d’annulation, ce qui résoudrait également le problème que vous rencontrez.

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

J'ai eu le même problème, et je l'ai résolu avec

<form onsubmit="return false;">

mais il y a une autre solution, vous pouvez ajouter une entrée invisible factice, pour que votre formulaire ressemble à ceci:

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

J'ai eu une expérience similaire tout à l'heure et la façon dont j'ai résolu le problème au lieu d'utiliser une balise a été remplacée par une balise de type = "bouton". Cela semblait résoudre le problème de la pression de la touche "Entrée" et du rejet de la modale bootstrap).

3
wmock

J'ai eu ce problème aussi et je l'ai résolu de cette façon. J'ai ajouté onsubmit pour former. Je souhaitais également pouvoir utiliser la touche Entrée comme clé de sauvegarde; j'ai donc ajouté le fichier javascript de save_stuff () à onsubmit. retourne faux; est utilisé pour empêcher le formulaire de soumettre.

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

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