Éviter le rejet modal en appuyant sur la touche Entrée


108

J'ai configuré un modal bootstrap avec un formulaire à l'intérieur, je viens de remarquer que lorsque j'appuie sur la touche Entrée, le modal est rejeté. Existe-t-il un moyen de ne pas le supprimer lorsque vous appuyez sur Entrée?

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


J'aime cette question. Pourquoi ne pas simplement modifier le code source du plugin?
Ryan

Je vais jeter un oeil là-dessus, si je trouve quelque chose d'utile, je le modifierai. En attendant, j'espère que quelqu'un connaît la réponse.
Luke Morgan

J'ai changé de click.dismiss.modal à keyup, ça semble bien, je vérifierai à nouveau plus tard pour voir si j'ai foiré autre chose
Luke Morgan

Ouais, ça a foiré les boutons (j'ai ajouté un onclick = "$ ('# signinModal'). Modal ('hide');" pour éviter ces problèmes, maintenant tout va bien, semble-t-il)
Luke Morgan

Réponses:


122

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>

En appuyant sur Entrée dans le champ de saisie, ce bouton a été déclenché. Je l'ai changé pour une ancre à la place 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.


Non, pas de boutons utilisés, j'ai utilisé les éléments <a>, je suppose que c'est autre chose. Le code que j'utilise est essentiellement l'exemple de code sur la page de bootstrap, juste avec un formulaire ajouté à l'intérieur
Luke Morgan

Je n'ai pas vu le bouton dans le coin supérieur droit, c'était le problème. Maintenant ça marche bien, merci!
Luke Morgan

+1, excellente trouvaille! Je me demande si quelqu'un a mis cela dans le suivi des problèmes de bootstrap? Je suis trop paresseux pour vérifier pour le moment. Peut-être après le déjeuner.
Andrew

8
Ce n'est pas seulement un problème de bouton. J'ai supprimé tous les boutons de mon modal (y compris le "x" supérieur droit), mais si j'ai un seul champ de texte de formulaire, appuyer sur Entrée fermera la boîte de dialogue. Curieusement, ce n'est un problème que lorsqu'il n'y a qu'un seul champ de texte. Une fois que j'en ai deux, Enter ne rejette pas le modèle, quel que soit le champ qui a le focus.
jpeskin

11
on peut utiliser type = "button" sur le bouton d'annulation
Muayyad Alsadi


19

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

J'ai trouvé qu'un formulaire avec un seul champ de texte obligerait le navigateur à soumettre un formulaire (et entraînerait le rejet), si vous appuyez sur 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 être un problème si vous utilisez réellement l'événement de soumission, mais j'utilise des frameworks JS qui génèrent des requêtes AJAX plutôt que de faire une soumission de navigateur, donc je préfère désactiver entièrement la soumission. (Cela signifie également que je n'ai pas à modifier manuellement chaque élément de formulaire qui pourrait déclencher une soumission).

Plus d'informations ici: Les boîtes de dialogue modales Bootstrap avec un seul champ de saisie de texte sont toujours fermées sur la touche Entrée


2
J'avais déjà type="button"sur tous mes boutons de fermeture / d'annulation, mais j'avais toujours ce problème avec la clé d'entrée fermant mon modal. Je n'avais qu'un seul champ de texte d'entrée dans mon modal, et votre solution l'a corrigé. Merci pour votre réponse!
Darren Parker

7

Vous pouvez placer le bouton de connexion avant le bouton d'annulation et cela 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>

6
Annuler ne doit pas être de type soumettre
Manatax

5

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, de sorte que votre formulaire ressemblerait à ceci:

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

3

J'ai eu une expérience similaire tout à l'heure et la façon dont je l'ai résolu était au lieu d'utiliser une balise, j'ai changé la balise en une balise avec type = "button". Cela a semblé résoudre le problème d'appuyer sur la touche "Entrée" et de rejeter le modal bootstrap.


2

J'ai eu ce problème aussi et je l'ai résolu de cette façon. J'ai ajouté onsubmit au formulaire. Je voulais également pouvoir utiliser la clé d'entrée comme clé de sauvegarde, j'ai donc ajouté le javascript save_stuff () à onsubmit. retourner faux; est utilisé pour empêcher l'envoi du formulaire.

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

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.