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

Question

J'ai un sondage sur un site web, et il semble y avoir des problèmes avec les utilisateurs qui appuient sur la touche Entrée (je ne sais pas pourquoi) et soumettent accidentellement le sondage (formulaire) sans cliquer sur le bouton de soumission. Y a-t-il un moyen d'empêcher cela?

Je utilise HTML, PHP 5.2.9, et jQuery sur le sondage.

Answer 1

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 la publication originale, pour le rendre plus utilisable et permettre aux gens d'appuyer sur Enter 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;
    }
  });
});

Answer 2

Interdire la touche Entrée n'importe où

Si vous n'avez pas de </code> dans votre formulaire, ajoutez simplement ce qui suit à votre <code><form></code>:</p> <pre><code><form ... onkeydown="return event.key != 'Enter';"> </code></pre> <p>Ou avec jQuery:</p> <pre><code>$(document).on("keydown", "form", function(event) { return event.key != "Enter"; }); </code></pre> <p>Cela fera en sorte que chaque pression de touche à l'intérieur du formulaire sera vérifiée sur la <code>clé</code>. Si ce n'est pas <code>Enter</code>, alors il renverra <code>true</code> et tout continuera normalement. Si c'est <code>Enter</code>, alors il renverra <code>false</code> et tout s'arrêtera immédiatement, donc le formulaire ne sera pas soumis.</p> <p>L'événement <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event" rel="noreferrer"><code>keydown</code></a> est préféré par rapport à <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event" rel="noreferrer"><code>keyup</code></a> car le <code>keyup</code> est trop tard pour bloquer la soumission du formulaire. Historiquement, il y avait aussi le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event" rel="noreferrer"><code>keypress</code></a>, mais celui-ci est obsolète, tout comme le <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode" rel="noreferrer"><code>KeyboardEvent.keyCode</code></a>. Vous devriez plutôt utiliser <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" rel="noreferrer"><code>KeyboardEvent.key</code></a> qui renvoie le nom de la touche enfoncée. Lorsque <code>Enter</code> est vérifié, cela vérifierait 13 (Enter normal) ainsi que 108 (Enter du pavé numérique).</p> <p>Remarquez que <code>$(window)</code> comme suggéré dans certaines autres réponses au lieu de <code>$(document)</code> ne fonctionne pas pour <code>keydown</code>/<code>keyup</code> dans IE<=8, donc ce n'est pas un bon choix si vous souhaitez également couvrir ces pauvres utilisateurs.</p> <h2>Autoriser la touche Entrée uniquement sur les zones de texte</h2> <p>Si vous avez une <code><textarea></code> dans votre formulaire (qui bien sûr <em>devrait</em> accepter la touche Entrée), ajoutez le gestionnaire keydown à chaque élément d'entrée individuel qui n'est pas un <code><textarea></code>. </p> <pre><code><input ... onkeydown="return event.key != 'Enter';"> <select ... onkeydown="return event.key != 'Enter';"> ... </code></pre> <p>Pour réduire le code répétitif, il est préférable de le faire avec jQuery:</p> <pre><code>$(document).on("keydown", ":input:not(textarea)", function(event) { return event.key != "Enter"; }); </code></pre> <p>Si vous avez d'autres fonctions gestionnaires d'événements attachées à ces éléments d'entrée, que vous aimeriez également invoquer en appuyant sur la touche Entrée pour une raison quelconque, alors empêchez uniquement le comportement par défaut de l'événement au lieu de renvoyer false, afin qu'il puisse se propager correctement vers d'autres gestionnaires.</p> <pre><code>$(document).on("keydown", ":input:not(textarea)", function(event) { if (event.key == "Enter") { event.preventDefault(); } }); </code></pre> <h2>Autoriser la touche Entrée uniquement sur les zones de texte et les boutons de soumission</h2> <p>Si vous souhaitez autoriser la touche Entrée également sur les boutons de soumission <code><input|button type="submit"></code>, vous pouvez toujours affiner le sélecteur comme ci-dessous.</p> <pre><code>$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) { // ... }); </code></pre> <p>Remarquez que <code>input[type=text]</code> comme suggéré dans certaines autres réponses ne couvre pas ces entrées non textuelles HTML5, donc ce n'est pas un bon sélecteur.</p></x-turndown>

Answer 3

Si vous utilisez un script pour effectuer la soumission réelle, vous pouvez ajouter la ligne "return false" au gestionnaire onsubmit comme ceci :

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

Answer 4

J'ai dû attraper les trois événements liés à l'appui sur les touches afin d'empêcher la soumission du formulaire :

    var empêcherSoumission = function(event) {
        if(event.keyCode == 13) {
            console.log("attrapé !");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(empêcherSoumission);
    $("#search").keydown(empêcherSoumission);
    $("#search").keyup(empêcherSoumission);

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

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

Answer 5

Au lieu d'empêcher les utilisateurs d'appuyer sur la touche Entrée, ce qui peut sembler contre nature, vous pouvez laisser le formulaire tel quel et ajouter une validation côté client supplémentaire : lorsque l'enquête n'est pas terminée, le résultat n'est pas envoyé au serveur et l'utilisateur reçoit un message indiquant ce qui doit être complété pour finaliser le formulaire. Si vous utilisez jQuery, essayez le plugin Validation :

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

Cela nécessitera plus de travail que de capturer la touche Entrée, mais cela offrira certainement une expérience utilisateur plus riche.