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

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

[ 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;

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;
 });
});

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()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

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();
    }
}

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.

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

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");
        }
    });
});

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.

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;
            }
        }
    }
}

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.

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

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

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.

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

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();
    }
});

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;
    } 
});

Que diriez-vous:

<asp:Button ID="button" UseSubmitBehavior="false"/>

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>

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é.

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

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

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

}

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.

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.

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

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

   </form>

Voici comment je le ferais:

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

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>

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.