Question Empêcher les utilisateurs de soumettre un formulaire en appuyant sur Entrée


J'ai un sondage sur un site Web, et il semble y avoir quelques problèmes avec les utilisateurs en appuyant sur Entrée (je ne sais pas pourquoi) et en soumettant accidentellement l'enquête (formulaire) sans cliquer sur le bouton Soumettre. Est-ce qu'il y a un moyen d'éviter cela?

J'utilise HTML, PHP 5.2.9 et jQuery dans l'enquête.


608
2018-05-21 21:09


origine


Réponses:


Vous pouvez utiliser une méthode telle que

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

En lisant les commentaires sur le post original, pour le rendre plus utilisable et permettre aux gens d'appuyer Entrer s'ils ont rempli tous les champs:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

723
2018-05-21 21:19



Interdire entrer la clé n'importe où

Si vous n'avez pas de <textarea> dans votre formulaire, ajoutez simplement ce qui suit à votre <form>:

<form ... onkeypress="return event.keyCode != 13;">

Ou avec jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

Cela entraînera que chaque pression de touche dans le formulaire sera vérifiée sur le code de clé. Si ce n'est pas 13 (la touche Entrée), alors il retournera vrai et tout ira comme prévu. Si c'est 13 (la touche Entrée), alors il retournera faux et tout s'arrêtera immédiatement, donc le formulaire ne sera pas envoyé.

le keypress événement est préféré sur keydown car ceci n'est déclenché que lorsque le personnage est en train d'être inséré. le keydown (et keyup) sont tirés quand tout la touche est enfoncée, y compris les touches de contrôle. Et le keyCode de keypress représente le caractère en cours d'insertion, pas la clé physique utilisée. De cette façon, vous n'avez pas besoin de vérifier explicitement si la touche Numpad Entrée (108) est enfoncée aussi. le keyup est trop tard pour bloquer le formulaire.

Notez que $(window) comme suggéré dans d'autres réponses au lieu de $(document) ne fonctionne pas pour keydown/keypress/keyup dans IE <= 8, ce n'est donc pas un bon choix si vous voulez également couvrir ces pauvres utilisateurs.

Autoriser la touche d'entrée sur les zones de texte uniquement

Si tu as un <textarea> dans votre forme (qui bien sûr devrait Acceptez la touche Entrée), puis ajoutez le gestionnaire de touches à chaque élément d'entrée individuel qui n'est pas un <textarea>.

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

Pour réduire la température, il vaut mieux utiliser jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

Si vous avez d'autres fonctions de gestionnaire d'événements attachées à ces éléments d'entrée, que vous aimeriez également appeler sur une touche entrée pour une raison quelconque, empêchez seulement le comportement par défaut de l'événement au lieu de retourner false, afin qu'il puisse propager correctement aux autres gestionnaires.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Autoriser la touche d'entrée sur les zones de texte et soumettre les boutons uniquement

Si vous souhaitez autoriser la touche Entrée sur les boutons d'envoi <input|button type="submit"> aussi, vous pouvez toujours affiner le sélecteur comme ci-dessous.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

Notez que input[type=text] comme suggéré dans d'autres réponses ne couvre pas ces entrées de texte non HTML5, ce n'est pas un bon sélecteur.


466
2017-12-29 21:42



J'ai dû attraper tous les trois événements liés aux touches de presse afin d'empêcher le formulaire d'être soumis:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Vous pouvez combiner tout ce qui précède dans une belle version compacte:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

56
2018-03-27 13:57



Si vous utilisez un script pour effectuer l'envoi proprement dit, vous pouvez ajouter la ligne "return false" au gestionnaire onsubmit comme suit:

<form onsubmit="return false;">

Appeler submit () sur le formulaire à partir de JavaScript ne déclenchera pas l'événement.


41
2017-07-24 16:29



Utilisation:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Cette solution fonctionne sur tous les formulaires sur un site web (également sur des formulaires insérés avec Ajax), en prévenant uniquement Entrers dans les textes d'entrée. Placez-le dans une fonction de document prêt, et oubliez ce problème pour une vie.


21
2018-05-30 12:36



Au lieu d'empêcher les utilisateurs de presser EntrerCela peut sembler anormal, vous pouvez laisser le formulaire tel quel et ajouter une validation supplémentaire côté client: Lorsque l'enquête n'est pas terminée, le résultat n'est pas envoyé au serveur et l'utilisateur reçoit un bon message indiquant ce qui doit être terminé Complétez le formulaire. Si vous utilisez jQuery, essayez le plugin Validation:

http://docs.jquery.com/Plugins/Validation

Cela exigera plus de travail que d'attraper le Entrer bouton, mais sûrement, il fournira une expérience utilisateur plus riche.


19
2018-05-21 21:35



Je ne peux pas encore commenter, alors je posterai une nouvelle réponse

La réponse acceptée est ok-ish, mais elle n'arrêtait pas de soumettre le pavé numérique. Au moins dans la version actuelle de Chrome. J'ai dû modifier la condition du code clé pour cela, alors ça marche.

if(event.keyCode == 13 || event.keyCode == 169) {...}

16
2017-08-07 21:28



Une belle petite solution jQuery simple:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

15
2017-12-09 20:35



Une approche complètement différente:

  1. La première <button type="submit"> dans le formulaire sera activé en appuyant sur Entrer.
  2. Ceci est vrai même si le bouton est caché avec style="display:none;
  3. Le script de ce bouton peut retourner false, qui abandonne le processus de soumission.
  4. Vous pouvez toujours avoir un autre <button type=submit> soumettre le formulaire. Juste retour true mettre en cascade la soumission.
  5. Pressage Entrer tandis que le bouton de soumission réel est focalisé activera le bouton de soumission réel.
  6. Pressage Entrer à l'intérieur <textarea> ou d'autres contrôles de forme se comporteront normalement.
  7. Pressage Entrer à l'intérieur <input> les contrôles de formulaire déclencheront le premier <button type=submit>, qui revient false, et ainsi rien ne se passe.

Ainsi:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

8
2018-02-20 11:28



Donner au formulaire une action de 'javascript: void (0);' semble faire l'affaire

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

7
2018-04-27 11:49



C'est ma solution pour atteindre l'objectif, C'est propre et efficace.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

7
2018-03-23 23:57