Comment empêcher ENTER keypress de soumettre un formulaire web?

voici un handler jQuery qui peut être utilisé pour arrêter la touche enter submits, et aussi la touche stop backspace -> back. Les paires (keyCode: selectorString) dans l'objet "keyStop" sont utilisées pour apparier les noeuds qui ne devraient pas lancer leur action par défaut.

rappelez-vous 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 arrière de toute façon, donc désactiver son raccourci clé est OK. La discussion" doit entrer -> soumettre " est importante, mais elle n'est pas liée à la question posée.

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

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

simplement retourner false à partir du handler onsubmit

<form onsubmit="return false;">

ou si vous voulez un handler 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 de soumission par défaut du formulaire. Vous pouvez l'attacher à n'importe quel champ d'entrée 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 ENTER active simplement le bouton submit par défaut du formulaire, qui sera le premier

<input type="submit" />

le navigateur trouve dans le formulaire.

N'ont donc pas un bouton Soumettre, mais quelque chose comme

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

---

modifier : en réponse à la discussion dans les commentaires:

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

L'autre problème est que cela repose sur Javascript pour soumettre le formulaire. Cela peut poser un problème du point de vue de l'accessibilité. Ceci peut être résolu en écrivant le <input type='button'/> avec javascript, puis en mettant un <input type='submit' /> dans une étiquette <noscript> . L'inconvénient de cette approche est que pour les navigateurs javascript-disabled vous aurez alors des soumissions de formulaire sur ENTER. Il appartient au po de décider ce qui est souhaité le comportement dans ce cas.

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

en résumé en Javascript pur est:

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

ceci désactive seulement l'action de pression" Enter " pour le type d'entrée='text'. Les visiteurs peuvent toujours utiliser la touche "Entrée" sur tout le site.

si vous voulez désactiver" Enter " pour d'autres actions aussi, vous pouvez ajouter console.log (e); pour vos besoins de test, et cliquez sur F12 dans chrome, allez dans l'onglet "console" et cliquez sur "backspace" sur la page et regardez à l'intérieur pour voir quelles sont les valeurs retourné, alors vous pouvez cibler tous ces paramètres pour améliorer le code ci-dessus pour répondre à vos besoins pour "E. cible.nodeName" , "E. cible.tapez" et beaucoup plus...

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

toutes les réponses que j'ai trouvées sur ce sujet, ici ou dans d'autres messages a un inconvénient et c'est qu'il empêche le déclencheur de changement réel sur l'élément de formulaire aussi bien. Donc, si vous exécutez ces solutions événement onchange n'est pas déclenché. Pour surmonter ce problème, j'ai modifié ces codes et développé le code suivant pour moi-même. J'espère que cela deviendra utile pour d'autres. J'ai donné une classe à mon formulaire "prevent_auto_submit" et j'ai 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");
        }
    });
});

j'ai passé un certain temps à faire ce navigateur croisé pour IE8, 9, 10, Opera 9+, Firefox 23, Safari (PC) et Safari(MAC)

exemple de JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe /

code de Base-appelez cette fonction via " onkeypress "attaché à votre formulaire et passer" fenêtre.l'événement".

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

puis sur votre formulaire:

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

cependant, ce serait mieux si vous n'utilisiez pas le JavaScript gênant.

Je l'ai toujours fait avec un clavier comme celui-ci dans le passé, mais aujourd'hui, j'ai trouvé une solution plus simple. La touche enter déclenche juste le premier bouton Non désactivé soumettre sur le formulaire, donc en fait tout ce qui est nécessaire 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 ça. Les touches seront gérées comme d'habitude par le navigateur / champs / etc. Si la logique enter-submit est activée, alors le navigateur trouvera que le bouton submit caché et la déclencher. Et le gestionnaire javascript empêchera alors la soumission.

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

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

empêcher "ENTRER" pour soumettre le formulaire peut déranger certains de vos utilisateurs. Il serait donc préférable de suivre la procédure ci-dessous:

écrivez l'événement 'onSubmit' dans votre étiquette 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 voulez empêcher la soumission du formulaire en appuyant sur la touche Enter, 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 étiquette à votre formulaire - onsubmit="return false;" Vous ne pouvez alors soumettre votre formulaire qu'avec une fonction JavaScript.

pour éviter de soumettre le formulaire en appuyant sur entrez dans un champ textarea ou input , cochez l'événement Soumettre pour trouver quel type d'élément 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 Soumettre et vous lancez l'événement avec un bouton normal. C'est mieux parce que dans le premier exemple 2 les événements submit sont déclenchés, mais dans le second exemple, seul un événement submit 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 de:

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

s'il vous Plaît vérifier cet article Comment éviter d'ENTRER touche à 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 les bulles même, 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 plus l'émulateur pour IE7 et 8 qui vient avec l'outil de développement D'IE9 (F12).

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

une autre méthode consiste à ajouter le bouton "Soumettre" au formulaire seulement lorsqu'il est censé être soumis et à le remplacer par un simple div lors du remplissage du formulaire

ajoutez simplement cet attribut à votre étiquette de formulaire:

onsubmit="return gbCanSubmit;"

puis, dans votre étiquette de SCRIPT, ajoutez ceci:

var gbCanSubmit = false;

ensuite, quand vous faites un bouton ou pour toute autre raison (comme dans une fonction) vous autorisez finalement un soumettre, simplement appuyer sur le booléen global et faire un .soumettre () appeler, 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 suis tombé sur ce moi-même parce que j'ai plusieurs boutons soumettre avec des valeurs de 'nom' différentes, de sorte que lorsque soumis ils font des choses différentes sur le même fichier php. Le bouton enter / return casse cette option car ces valeurs ne sont pas soumises. Donc je me disais, est-ce que le bouton enter / return active le premier bouton Soumettre dans le formulaire? De cette façon, vous pouvez avoir un bouton Soumettre 'vanilla' qui est soit caché ou a une valeur 'name' qui renvoie l'exécution de fichier php de retourner à la page avec le formulaire. Ou bien une valeur par défaut (cachée) 'nom' que le clavier active, et les boutons soumettre écrasent avec leurs propres valeurs 'nom'. Juste une pensée.

Que Diriez-vous de:

<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 soumettre, mais les champs de texte i.e. la cible explicite quand vous appuyez sur retour dans un, ne sera pas le bon nom.

ça a marché pour moi.

onkeydown= " return !(événement.keyCode==13)"

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

   </form>

mis en javascript fichier externe

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

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

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

<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 (des 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 ce code 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 touche ENTER fonctionne comme prévu, mais une confirmation (un deuxième ENTER tapent, habituellement) est nécessaire.

je laisse aux lecteurs la recherche d'un script envoyant l'utilisateur dans le champ où il a pressé ENTER s'il décide de rester sur la forme.