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 des problèmes avec les utilisateurs qui cliquent sur Entrée (je ne sais pas pourquoi) et qui soumettent 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 sur l’enquête.

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 message d’origine, pour le rendre plus utilisable et permettre aux utilisateurs d’appuyer sur Entrée 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; } }); }); 

Interdire d’entrer la clé n’importe où

Si vous n’avez pas de dans votre formulaire, ajoutez simplement ce qui suit à votre

:

 

Ou avec jQuery:

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

Cela entraînera que chaque pression sur la touche dans le formulaire sera vérifiée sur le keyCode. S’il ne s’agit pas de 13 (la touche Entrée), il retournera true et tout ira comme prévu. S’il est 13 (la touche Entrée), il renverra false et tout s’arrêtera immédiatement, le formulaire ne sera donc pas soumis.

L’événement keypress est préférable à l’événement keydown car il n’est déclenché que lorsque le caractère est réellement inséré. Le keydown (et le keyup ) sont keyup quand une touche est pressée, y compris les touches de contrôle. Et le keyCode de keyCode représente le caractère réel inséré et non la clé physique utilisée. De cette façon, vous n’avez pas besoin de vérifier explicitement si la touche Pavé numérique (108) est également activée. Le keyup est trop tard pour bloquer la soumission du formulaire.

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

Autoriser la saisie de texte sur les zones de texte uniquement

Si vous avez un dans votre formulaire (qui doit bien entendu accepter la touche Entrée), ajoutez le gestionnaire de touches à chaque élément d’entrée individuel qui n’est pas un .

   

Pour réduire le passe-partout, il est préférable de le faire avec jQuery:

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

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

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

Autoriser la saisie de texte sur les zones de texte et soumettre des boutons uniquement

Si vous souhaitez autoriser la saisie d’une touche sur les boutons d’envoi , vous pouvez toujours affiner le sélecteur comme indiqué ci-dessous.

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

Notez que l’ input[type=text] suggérée dans d’autres réponses ne couvre pas ces entrées HTML5 non textuelles, ce n’est donc pas un bon sélecteur.

Je devais attraper les trois événements liés à l’appui sur les touches pour éviter que le formulaire ne soit 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(); } }); 

Si vous utilisez un script pour effectuer l’envoi, vous pouvez append une ligne “return false” au gestionnaire onsubmit comme ceci:

 

L’appel de submit () sur le formulaire à partir de JavaScript ne déclenche pas l’événement.

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 d’un site Web (également sur les formulaires insérés avec Ajax), empêchant uniquement la saisie de s dans les textes d’entrée. Placez-le dans une fonction de document prête et oubliez ce problème pour une vie.

Au lieu d’empêcher les utilisateurs d’appuyer sur Entrée , ce qui peut paraître anormal, vous pouvez laisser le formulaire tel quel et append 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 message dire ce qui doit être terminé pour compléter le formulaire. Si vous utilisez jQuery, essayez le plug-in Validation:

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

Cela nécessitera plus de travail que d’attraper le bouton Entrée , mais cela fournira sûrement une expérience utilisateur plus riche.

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

La réponse acceptée est ok-ish, mais elle ne s’arrêtait pas sur submit on numpad enter. Au moins dans la version actuelle de Chrome. J’ai dû modifier la condition de code d’activation à ceci, alors cela fonctionne.

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

Une belle petite solution simple jQuery:

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

Une approche complètement différente:

  1. Le premier du formulaire sera activé en appuyant sur Entrée .
  2. Cela est vrai même si le bouton est masqué avec style="display:none;
  3. Le script de ce bouton peut renvoyer false , ce qui annule le processus de soumission.
  4. Vous pouvez toujours avoir un autre pour soumettre le formulaire. Il suffit de retourner true pour cascader la soumission.
  5. Si vous appuyez sur la touche Entrée lorsque le bouton d’envoi réel est activé, le bouton d’envoi réel sera activé.
  6. Appuyer sur Entrée à l' intérieur de ou d’autres contrôles de formulaire se comportera normalement.
  7. Le fait d’appuyer sur la touche Entrée à l' intérieur commandes de formulaire déclenchera le premier , qui renvoie false , et donc rien ne se passe.

Ainsi:

 

C’est ma solution pour atteindre l’objective, c’est propre et efficace.

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

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

 

J’avais besoin d’empêcher uniquement les entrées spécifiques de la soumission, donc j’ai utilisé un sélecteur de classe, pour que ce soit une fonctionnalité “globale” où que j’en aie besoin.

  

Et ce code jQuery:

 $('.idNoEnter').keydown(function (e) { if (e.keyCode == 13) { e.preventDefault(); } }); 

Sinon, si le keydown est insuffisant:

 $('.idNoEnter').on('keypress keydown keyup', function (e) { if (e.keyCode == 13) { e.preventDefault(); } }); 

Quelques notes:

En modifiant différentes bonnes réponses ici, la touche Entrée semble fonctionner pour la keydown de tous les navigateurs. Pour l’alternative, j’ai mis à jour bind() à la méthode on() .

Je suis un grand fan des sélectionneurs de classe, en pesant tous les avantages et inconvénients et les discussions de performance. Ma convention de dénomination est ‘idSomething’ pour indiquer que jQuery l’utilise comme identifiant, pour le séparer du style CSS.

  1. N’utilisez pas type = “submit” pour les entrées ou les boutons.
  2. Utilisez type = “button” et utilisez js [Jquery / angular / etc] pour soumettre le formulaire au serveur.

Section 4.10.22.2 La soumission implicite de la spécification HTML5 du W3C indique:

Le bouton par défaut d’un élément de form est le premier bouton d’envoi dans un arbre dont le propriétaire du formulaire est cet élément de form .

Si l’agent utilisateur prend en charge le fait de laisser l’utilisateur soumettre un formulaire implicitement (par exemple, sur certaines plates-formes, appuyez sur la touche “Entrée” pendant qu’un champ de texte est focalisé soumet implicitement le formulaire). Le comportement doit obliger l’agent utilisateur à exécuter des étapes d’activation de clics synthétiques sur ce bouton par défaut .

Remarque: Par conséquent, si le bouton par défaut est désactivé, le formulaire n’est pas soumis lorsqu’un tel mécanisme de soumission implicite est utilisé. (Un bouton n’a aucun comportement d’activation lorsqu’il est désactivé.)

Par conséquent, un moyen conforme à la norme de désactiver toute soumission implicite du formulaire consiste à placer un bouton d’envoi désactivé en tant que premier bouton d’envoi du formulaire:

 

Une caractéristique intéressante de cette approche est qu’elle fonctionne sans JavaScript ; Que JavaScript soit activé ou non, un navigateur Web conforme aux normes est nécessaire pour empêcher la soumission de formulaire implicite.

Vous pouvez créer une méthode JavaScript pour vérifier si la touche Entrée a été atteinte et, le cas échéant, pour arrêter l’envoi.

  

Il suffit d’appeler cela sur la méthode de soumission.

Ne pas mettre un bouton d’envoi pourrait faire. Placez simplement un script sur l’entrée (type = bouton) ou ajoutez eventListener si vous souhaitez qu’il soumette les données dans le formulaire.

Plutôt l’utiliser

  

que d’utiliser cette

  

J’ai eu un problème similaire, où j’avais une grid avec “ajax textfields” (Yii CGridView) et un seul bouton de soumission. Chaque fois que je faisais une recherche sur un champ de texte et que j’appuyais sur pour entrer le formulaire soumis. J’ai dû faire quelque chose avec le bouton car c’était le seul bouton commun entre les vues (modèle MVC). Tout ce que j’avais à faire était de supprimer type="submit" et de mettre onclick="document.forms[0].submit()

Je pense que c’est bien couvert avec toutes les réponses, mais si vous utilisez un bouton avec un code de validation JavaScript, vous pouvez simplement définir le paramètre onkeypress du formulaire pour que votre appel soit envoyé comme prévu:

 

Le onkeypress JS pourrait être ce que vous devez faire. Il n’y a pas besoin d’un changement global plus important. Cela est particulièrement vrai si vous n’êtes pas en train de coder l’application à partir de zéro et si vous avez été amené à corriger le site Web de quelqu’un d’autre sans le déchirer et le tester à nouveau.

Dans mon cas spécifique, je devais empêcher ENTER de soumettre le formulaire et simuler le clic sur le bouton d’envoi. En effet, le bouton de soumission comportait un gestionnaire de clics car nous étions dans une fenêtre modale (ancien code hérité). En tout cas, voici mes solutions combinées pour ce cas.

  $('input,select').keypress(function(event) { // detect ENTER key if (event.keyCode == 13) { // simulate submit button click $("#btn-submit").click(); // stop form from submitting via ENTER key press event.preventDefault ? event.preventDefault() : event.returnValue = false; } }); 

Ce cas d’utilisation est particulièrement utile pour les personnes travaillant avec IE8.

Cela fonctionne pour moi

 jQuery.each($("#your_form_id").find('input'), function(){ $(this).bind('keypress keydown keyup', function(e){ if(e.keyCode == 13) { e.preventDefault(); } }); }); 

Quelque chose que je n’ai pas vu répond ici: lorsque vous passez en revue les éléments de la page, appuyez sur Entrée lorsque vous arrivez au bouton d’envoi pour déclencher le gestionnaire onsubmit sur le formulaire, mais il enregistrera l’événement en tant que MouseEvent. Voici ma solution courte pour couvrir la plupart des bases:

Ce n’est pas une réponse liée à jQuery

HTML

 

JavaScript

 window.submitMouseOnly=function(evt){ let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0; if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit(); } 

Pour trouver un exemple de travail: https://jsfiddle.net/nemesarial/6rhogva2/

Je voudrais append un petit code CoffeeScript (non testé sur le terrain):

 $ -> $(window).bind 'keypress', (event) -> if event.keyCode == 13 unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName] event.preventDefault() 

(J’espère que vous aimez la belle astuce dans la clause sauf.)

Utilisation:

 // Validate your form using the jQuery onsubmit function... It'll really work... $(document).ready(function(){ $(#form).submit(e){ e.preventDefault(); if(validation()) document.form1.submit(); }); }); function validation() { // Your form checking goes here. } 
// Your form data

Contrairement à d’autres méthodes, celle-ci empêche les formulaires d’être soumis lors de la saisie, mais ne bloque pas la clé d’entrée dans les entrées en général. Ne nécessite aucune bibliothèque externe

 window.addEventListener('keydown', function(e){ //set default value for variable that will hold the status of keypress pressedEnter = false; //if user pressed enter, set the variable to true if(event.keyCode == 13) pressedEnter = true; //we want forms to disable submit for a tenth of a second only setTimeout(function(){ pressedEnter = false; },100) }) //find all forms var forms = document.getElementsByTagName('form') //loop through forms for(i = 0; i < forms.length; i++){ //listen to submit event forms[i].addEventListener('submit', function(e){ //if user just pressed enter, stop the submit event if(pressedEnter == true) { e.preventDefault(); return false; } }) } 

Cela a fonctionné pour moi dans tous les navigateurs après beaucoup de frustration avec d’autres solutions. La fonction externe name_space est juste pour éviter de déclarer des globals, ce que je recommande également.

 $(function() {window.name_space = new name_space();}); //jquery doc ready function name_space() { this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1); this.stifle = function(event) { event.cancelBubble; event.returnValue = false; if(this.is_ie === false) { event.preventDefault(); } return false; } this.on_enter = function(func) { function catch_key(e) { var enter = 13; if(!e) { var e = event; } keynum = GetKeyNum(e); if (keynum === enter) { if(func !== undefined && func !== null) { func(); } return name_space.stifle(e); } return true; // submit } if (window.Event) { window.captureEvents(Event.KEYDOWN); window.onkeydown = catch_key; } else { document.onkeydown = catch_key; } if(name_space.is_ie === false) { document.onkeypress = catch_key; } } } 

Exemple d’utilisation:

 $(function() { name_space.on_enter( function () {alert('hola!');} ); }); 

Dans mon cas, j’avais deux champs de saisie semi-automatique de l’ interface utilisateur jQuery et des zones de texte dans un formulaire. Je voulais donc absolument qu’ils acceptent Enter . J’ai donc supprimé l’entrée type="submit" d’un formulaire et ajouté une ancre Ok place. Puis je l’ai stylé comme un bouton et ajouté le code suivant:

 $( '#btn' ).click( function( event ){ event.preventDefault(); if ( validateData() ){ $( 'form#frm' ).append( '' ); setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 ); } return false; }); 

Si un utilisateur remplit tous les champs obligatoires, validateData() réussit et le formulaire est soumis.