Comment empêcher la touche ENTRÉE de soumettre un formulaire Web?

207

Comment empêcher une ENTERpression sur une touche de soumettre un formulaire dans une application Web?

user67722
la source

Réponses:

99

[ révision 2012, pas de gestionnaire en ligne, conserve la gestion des entrées de zone de texte]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Vous pouvez maintenant définir un gestionnaire de touches sur le formulaire:
<form [...] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;
KooiInc
la source
3
Soit dit en passant: vous pouvez ajouter une vérification du type d'entrée (via la source d'événement) dans la fonction checkEnter pour exclure les zones de texte.
KooiInc
1
Travaux. J'ai ajouté ceci à une seule entrée parce que je voulais éviter que <enter> soumette le formulaire. Il avait un bouton pour effectuer une recherche interne, et il améliore en fait la convivialité.
Foxinni
1
Un problème avec cette approche (en utilisant cette fonction avec un gestionnaire d'événements sur le formulaire dans son ensemble), c'est qu'elle empêche également les entrées de se produire dans les zones de texte qui se trouvent également dans le formulaire (où les entrées sont généralement souhaitables).
Lonnie Best
1
@LonnieBest: merci de l'avoir remarqué. Vous avez lu mon commentaire sur cette réponse (voir ci - dessus), avez - vous? Quoi qu'il en soit, j'ai révisé cette réponse plutôt ancienne.
KooiInc
1
@Jonathan: vous pouvez attacher le gestionnaire à des champs de saisie uniques ou à des div contenant une collection de champs de saisie (mais pas les boutons) à la place du formulaire entier.
KooiInc
57

Voici un gestionnaire jQuery qui peut être utilisé pour arrêter la saisie de soumissions, et également arrêter la touche de retour arrière -> retour. Les paires (keyCode: selectorString) dans l'objet "keyStop" sont utilisées pour faire correspondre les nœuds qui ne doivent pas déclencher leur action par défaut.

N'oubliez pas que le Web doit être un endroit accessible, ce qui brise les attentes des utilisateurs de clavier. Cela dit, dans mon cas, l'application Web sur laquelle je travaille n'aime pas le bouton retour de toute façon, donc désactiver son raccourci clavier est OK. La discussion «devrait entrer -> soumettre» est importante, mais n'est pas liée à la question réelle posée.

Voici le code, à vous de réfléchir à l'accessibilité et pourquoi vous voudriez vraiment le faire!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});
thetoolman
la source
12
De la manière la plus simple: $ ("# myinput"). Keydown (fonction (e) {if (e.which == 13) e.preventDefault ();}); La clé consiste à utiliser "keydown" et event.preventDefault () ensemble. Cela ne fonctionne pas avec "keyup".
lepe
Cela a l'avantage sur d'autres solutions qui bloquent simplement la clé 13 que la suggestion automatique du navigateur continuera de fonctionner correctement.
jsalvata
52

Renvoyez simplement false du gestionnaire onsubmit

<form onsubmit="return false;">

ou si vous voulez un gestionnaire au milieu

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">
Paul Tarjan
la source
5
Cela semble être la réponse la plus simple. Je l'ai essayé sur Google Chrome et cela fonctionne bien. L'avez-vous testé dans tous les navigateurs?
styfle
22
Ce n'est pas une bonne idée si vous voulez que votre formulaire soit soumis en appuyant sur le submitbouton
AliBZ
13
Ne fonctionne pas car le bouton d'
envoi
39
@Paul, Comment cela a-t-il obtenu 38 votes positifs? Arrêt <form>de se faire soumis tout est de jeter le bébé avec l'eau du bain.
Pacerier
8
@Pacerier Dans le contexte d'un SPA, vous voudrez presque toujours gérer la soumission de formulaire manuellement. Toujours arrêter le navigateur de soumettre un formulaire (et actualiser la page, ce qui redémarre l'application) est raisonnable dans ce cas.
Nathan Friend
44
//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});
mtntrailrunner
la source
5
Cela fonctionne très bien. e.preventDefault()plutôt que d' return falseatteindre la même fin mais permettre à l'événement d'atteindre les gestionnaires dans les éléments parents. L'action par défaut (sommation de formulaire) sera toujours empêchée
scripté
24

Vous devrez appeler cette fonction qui annulera simplement le comportement d'envoi par défaut du formulaire. Vous pouvez le joindre à n'importe quel champ de saisie ou événement.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
hacher
la source
2
e devrait être un argument, puis vous devriez vérifier le window.event. De plus, vous devriez obtenir le code clé de l'événement. Enfin, vous devez retourner false.
ntownsend
9
Pouvez-vous expliquer où et comment appeler cette fonction?
mydoghasworms
17

La touche ENTRÉE active simplement le bouton d'envoi par défaut du formulaire, qui sera le premier

<input type="submit" />

le navigateur trouve dans le formulaire.

Par conséquent, vous n'avez pas de bouton d'envoi, mais quelque chose comme

<input type="button" value="Submit" onclick="submitform()" /> 

ÉDITER : En réponse à la discussion dans les commentaires:

Cela ne fonctionne pas si vous n'avez qu'un seul champ de texte - mais il se peut que ce soit le comportement souhaité dans ce cas.

L'autre problème est que cela s'appuie sur Javascript pour soumettre le formulaire. Cela peut être un problème du point de vue de l'accessibilité. Cela peut être résolu en écrivant le <input type='button'/>avec javascript, puis en mettant un <input type='submit' />dans un<noscript> balise. L'inconvénient de cette approche est que pour les navigateurs sans Javascript, vous aurez alors des soumissions de formulaire sur ENTER. C'est au PO de décider quel est le comportement souhaité dans ce cas.

Je ne connais aucun moyen de le faire sans invoquer du tout javascript.

DanSingerman
la source
Bizarrement, cela ne fonctionne pas dans Firefox s'il n'y a qu'un seul champ.
DanSingerman
5
Terrible pour l'accessibilité? Peut être. Cependant, cela répond à la question de ce type, à quoi sert SO ... Peut-être qu'une modification de la réponse pour souligner le problème d'accessibilité est un bon compromis?
Neil Barnwell, le
1
@bobince - peut-être que la question mérite -1 en raison de l'accessibilité, mais cette réponse précise à la question? Ne pense pas. En outre, il existe des cas d'utilisation valides pour lesquels vous souhaitez effectuer cette opération.
DanSingerman
Cependant, vous n'avez pas besoin de rendre le formulaire impossible à envoyer sans JavaScript. C'est si cela a fonctionné, ce qui n'est pas le cas, car les navigateurs soumettront volontiers un formulaire qui ne contient aucun bouton de soumission.
bobince
2
Testé dans tous ceux plus Opera avec une entrée de texte et un bouton d'entrée: tous ont toujours soumis le formulaire sur Entrée. Vous avez évidemment besoin de JavaScript pour «résoudre» le problème Enter, mais l'astuce consiste à le faire sans rendre la page complètement inutilisable lorsque JS n'est pas disponible.
bobince
13

En bref, en Javascript pur:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

Cela désactive uniquement l'action de la touche "Entrée" pour le type d'entrée = "texte". Les visiteurs peuvent toujours utiliser la touche "Entrée" sur tout le site Web.

Si vous souhaitez également désactiver "Entrée" pour d'autres actions, vous pouvez ajouter console.log (e); pour vos besoins de test, et appuyez sur F12 en chrome, allez dans l'onglet "console" et appuyez sur "backspace" sur la page et regardez à l'intérieur pour voir quelles valeurs sont retournées, puis vous pouvez cibler tous ces paramètres pour améliorer encore le code ci-dessus pour répondre à vos besoins pour "e.target.nodeName" , "e.target.type" et bien d'autres ...

Voir ma réponse détaillée pour une question similaire ici

Tarik
la source
3
En fait, ça devrait l'être e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'. Avec le code spécifié, il permettra de soumettre des formulaires si une radio ou une case à cocher sont ciblées.
afnpires
1
Il s'agit de la solution la plus efficace et la plus respectueuse des ressources. Merci à @AlexandrePires! Voici mon script de travail complet: stackoverflow.com/a/40686327/1589669
eapo
1
La seule solution de travail; au moins dans ma situation.
hex494D49
9

Toutes les réponses que j'ai trouvées à ce sujet, ici ou dans d'autres articles, ont un inconvénient, c'est qu'elles empêchent également le déclencheur de changement réel sur l'élément de formulaire. Donc, si vous exécutez ces solutions, l'événement onchange n'est pas déclenché également. Pour surmonter ce problème, j'ai modifié ces codes et développé le code suivant pour moi. J'espère que cela deviendra utile pour les autres. J'ai donné une classe à mon formulaire "prevent_auto_submit" et ajouté le JavaScript suivant:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});
Mahdi Mehrizi
la source
7

Je l'ai toujours fait avec un gestionnaire de touches comme le précédent, mais aujourd'hui j'ai trouvé une solution plus simple. La touche Entrée déclenche simplement le premier bouton d'envoi non désactivé du formulaire, donc en fait tout ce qui est requis est d'intercepter ce bouton en essayant de soumettre:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

C'est tout. Les frappes seront traitées comme d'habitude par le navigateur / champs / etc. Si la logique enter-submit est déclenchée, le navigateur trouvera ce bouton de soumission caché et le déclenchera. Et le gestionnaire javascript empêchera alors la soumission.

acoulton
la source
1
Habituellement, je n'aime pas les hacks, mais celui-ci est vraiment efficace.
TechWisdom
1
supprimer le div et simplement mettre attr hiddenen entrée serait plus court. bon hack :)
Nik
5

J'ai passé un peu de temps à créer ce navigateur croisé pour IE8,9,10, Opera 9+, Firefox 23, Safari (PC) et Safari (MAC)

Exemple JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Code de base - Appelez cette fonction via "onkeypress" attaché à votre formulaire et passez "window.event" dedans.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}
Adam
la source
4
stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Ensuite sur votre formulaire:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Cependant, il serait préférable que vous n'utilisiez pas un JavaScript intrusif.

ntownsend
la source
J'aime cette version car elle est plus lisible que celle de @hash. Un problème cependant, vous devez retourner false dans le bloc "if (keycode == 13)". En l'état, cette fonction empêche toute saisie au clavier sur le terrain. La version de @ hash comprend également e.keyCode, e.which et e.charCode ... je ne sais pas si e.charCode est important mais je le mets quand même dedans: "var keycode = eve.keyCode || eve.which || eve.charCode; ".
Jack Senechal
Merci, Jack. J'ai édité la réponse pour vérifier charCode. J'ai également déplacé l' return falseintérieur du bloc if. Bonne prise.
ntownsend
3

Dans mon cas, ce jQuery JavaScript a résolu le problème

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}
Kirby
la source
Génial, merci @Kirby! Étant donné que la clé d'entrée est maintenant désactivée dans le formulaire, comment pouvez-vous ensuite activer la clé d'entrée pour tous les <input>champs du formulaire?
Ian Campbell
3

Empêcher «ENTRER» d'envoyer le formulaire peut gêner certains de vos utilisateurs. Il serait donc préférable de suivre la procédure ci-dessous:

Écrivez l'événement «onSubmit» dans votre balise de formulaire:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

écrire la fonction Javascript comme suit:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Quelle que soit la raison, si vous souhaitez empêcher la soumission du formulaire en appuyant sur la touche Entrée, vous pouvez écrire la fonction suivante en javascript:

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

Merci.

venky
la source
3

Ajoutez cette balise à votre formulaire - onsubmit="return false;" Ensuite, vous ne pouvez soumettre votre formulaire qu'avec une fonction JavaScript.

Rajveer
la source
L'OP (comme la plupart de ceux qui ont été mordus par cette fonctionnalité de navigateur) voulait probablement autoriser la soumission avec un clic de souris, ce que cette méthode (malheureusement souvent recommandée) désactiverait également. Il n'y a pas de bon moyen de résoudre cela, mais par exemple la réponse ci-dessus (en ce moment), d'Adam, fait un meilleur travail.
Sz.
3

Pour éviter la forme soumettre lorsque vous appuyez sur enterune textareaouinput envoi de champ , vérifiez l'événement submit pour trouver le type d'élément qui a envoyé l'événement.

Exemple 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Une meilleure solution est si vous n'avez pas de bouton d'envoi et que vous déclenchez l'événement avec un bouton normal. C'est mieux parce que dans le premier exemple, 2 événements de soumission sont déclenchés, mais dans le deuxième exemple, un seul événement de soumission est déclenché.

Exemple 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});
Adam Mester
la source
3

Vous trouverez cela plus simple et utile: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});
Mike OO
la source
2

Que diriez-vous:

<asp:Button ID="button" UseSubmitBehavior="false"/>
pdiddy
la source
2

Veuillez consulter cet article Comment empêcher la touche ENTRÉE de soumettre un formulaire Web?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

pranabesh chand
la source
1

Vous pouvez piéger le keydown sur un formulaire en javascript et empêcher même le bouillonnement, je pense. ENTRER sur une page Web soumet simplement le formulaire dans lequel le contrôle actuellement sélectionné est placé.

Neil Barnwell
la source
dépend d'un contrôle tho;) dans une zone de texte, il passe simplement à la ligne suivante. Donc, attraper tous les événements de touche «entrer» n'est pas une bonne idée.
kender
Peut-être, mais dans ce cas, le formulaire aurait-il un événement keydown de toute façon?
Neil Barnwell
Vous le feriez directement sur tous les types de texte d'entrée et autres contrôles similaires. C'est un peu
pénible
1

Ce lien fournit une solution qui a fonctionné pour moi dans Chrome, FF et IE9 ainsi que l'émulateur pour IE7 et 8 fourni avec l'outil de développement d'IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

Miaka
la source
Si le lien est rompu, ajoutez ce code dans la zone d'en-tête de votre page. <script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && (node.type=="text")) {return false;} } document.onkeypress = stopRKey; </script>
Miaka
1

Une autre approche consiste à ajouter le bouton de saisie d'envoi au formulaire uniquement lorsqu'il est censé être soumis et à le remplacer par un simple div lors du remplissage du formulaire

Nicolas Manzini
la source
1

Ajoutez simplement cet attribut à votre balise FORM:

onsubmit="return gbCanSubmit;"

Ensuite, dans votre balise SCRIPT, ajoutez ceci:

var gbCanSubmit = false;

Ensuite, lorsque vous effectuez un bouton ou pour toute autre raison (comme dans une fonction), vous autorisez enfin une soumission, il vous suffit de retourner le booléen global et d'effectuer un appel .submit (), similaire à cet exemple:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}
Volomike
la source
1

Je l'ai rencontré moi-même parce que j'ai plusieurs boutons de soumission avec différentes valeurs de «nom», de sorte que lorsqu'ils sont soumis, ils font des choses différentes sur le même fichier php. Le bouton enter/ returnrompt cela car ces valeurs ne sont pas soumises. Je pensais donc, le bouton enter/ returnactive-t-il le premier bouton de soumission du formulaire? De cette façon, vous pourriez avoir un bouton d'envoi 'vanille' qui est soit caché soit a une valeur 'nom' qui renvoie le fichier php en cours d'exécution à la page avec le formulaire dedans. Ou bien une valeur de «nom» par défaut (masquée) que la touche active, et les boutons de soumission écrasent avec leurs propres valeurs de «nom». Juste une pensée.

gavin
la source
1

Que diriez-vous:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

Et il suffit de nommer votre bouton à droite et il sera toujours soumis, mais les champs de texte, c'est-à-dire explicitOriginalTarget lorsque vous appuyez sur retour en un, n'auront pas le bon nom.

Andrew Arrow
la source
0

Cela a fonctionné pour moi.
onkeydown = "retour! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>
criard
la source
1
Si vous avez une zone de texte, vous ne pouvez pas passer à la ligne suivante en entrant dans le même formulaire
Aamir Afridi
0

Voici comment je le ferais:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}
Lonnie Best
la source
-1

mettre dans un fichier externe javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

ou quelque part à l'intérieur de la balise du corps

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>
topC
la source
-2

J'ai eu le même problème (formulaires avec des tonnes de champs de texte et des utilisateurs non qualifiés).

Je l'ai résolu de cette façon:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

en utilisant cela dans le code HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

De cette façon, la ENTERclé fonctionne comme prévu, mais une confirmation (un deuxième ENTERappui, généralement) est requise.

Je laisse aux lecteurs la quête d'un script envoyant l'utilisateur dans le champ où il a appuyé ENTER s'il décide de rester sur le formulaire.

Marco Bernardini
la source