Comment empêcher ENTRER une touche pour soumettre un formulaire Web?

Question

Comment empêcher une touche ENTRÉE d'envoyer un formulaire dans une application Web? J'ai besoin d'une réponse détaillée.

Answer 1

[ révision 2012, pas de gestionnaire en ligne, préserver textarea saisir la manipulation]

 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 (événement)">

 document.querySelector('form').onkeypress = checkEnter;
 

Answer 2

Voici un jQuery gestionnaire qui peut être utilisé pour arrêter entrer soumet, et aussi arrêter la touche d'effacement arrière -> arrière. L' (keyCode: selectorString) paires dans le "keyStop" objet sont utilisés pour faire correspondre les nœuds qui ne devrait pas le feu à leur action par défaut.

Rappelez-vous que le web doit être accessible à un lieu, et c'est la rupture de clavier les attentes des utilisateurs. Cela dit, dans mon cas, l'application web que je suis en train de travailler sur n'aime pas le bouton de retour, de toute façon, si la désactivation de son " touche de raccourci est OK. Le "doit entrer -> submit" la discussion est importante, mais pas liées à la question posée.

Voici le code, à vous de réfléchir à accessibilite 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;
 });
});

Answer 3

Renvoie simplement false du gestionnaire d'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()">
 

Answer 4

//Turn off submit on "Enter" key

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

Answer 5

Vous devez appeler cette fonction qui sera tout simplement annuler la valeur par défaut présenter le comportement du formulaire. Vous pouvez la joindre à n’importe quel champ de saisie ou de l’événement.