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 entrent (je ne sais pas pourquoi) et soumettent accidentellement le sondage (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 gens de presser Enters'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 la touche entrée n'importe où

Si vous n'en avez pas <textarea>dans votre formulaire, ajoutez simplement ce qui suit à votre <form>:

<form ... onkeydown="return event.key != 'Enter';">

Ou avec jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Cela entraînera que chaque pression de touche à l'intérieur du formulaire sera vérifiée sur le key. Si ce n'est pas le cas Enter, il reviendra trueet tout continuera comme d'habitude. Si c'est le cas Enter, il reviendra falseet tout s'arrêtera immédiatement, donc le formulaire ne sera pas envoyé.

L' keydownévénement est préféré keyupcar il keyupest trop tard pour bloquer la soumission du formulaire. Historiquement, il y avait aussi le keypress, mais c'est obsolète, tout comme le KeyboardEvent.keyCode. Vous devez utiliser à la KeyboardEvent.keyplace qui renvoie le nom de la touche enfoncée. Lorsque Enterest coché, cela vérifierait 13 (entrée normale) ainsi que 108 (entrée du pavé numérique).

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

Autoriser la touche Entrée uniquement sur les zones de texte

Si vous avez un <textarea>dans votre formulaire (qui bien sûr devrait accepter la touche Entrée), ajoutez le gestionnaire de keydown à chaque élément d'entrée individuel qui n'est pas un <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

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

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Si vous avez d'autres fonctions de gestionnaire d'événements attachées à ces éléments d'entrée, que vous souhaitez également invoquer sur la touche Entrée pour une raison quelconque, n'empêchez que le comportement par défaut de l'événement au lieu de renvoyer false, afin qu'il puisse se propager correctement aux autres gestionnaires.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Autoriser la touche Entrée dans les zones de texte et soumettre uniquement les boutons

Si vous souhaitez également autoriser la touche Entrée sur les boutons de soumission <input|button type="submit">, vous pouvez toujours affiner le sélecteur comme ci-dessous.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

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

La section 4.10.22.2 La soumission implicite de la spécification W3C HTML5 dit:

formLe bouton par défaut d' un élément est le premier bouton d'envoi dans l' arborescence dont le propriétaire du formulaire est cet formélément.

Si l'agent utilisateur prend en charge le fait de laisser l'utilisateur soumettre un formulaire implicitement (par exemple, sur certaines plates-formes, appuyer sur la touche "Entrée" alors qu'un champ de texte est focalisé soumet implicitement le formulaire), le faire pour un formulaire dont le bouton par défaut a une activation définie Le comportement doit obliger l'agent utilisateur à exécuter des étapes d'activation de clic synthétique 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, une façon conforme aux normes de désactiver toute soumission implicite du formulaire consiste à placer un bouton d'envoi désactivé comme premier bouton d'envoi du formulaire:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

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 requis pour empêcher la soumission implicite de formulaires.

J'ai dû attraper les trois événements liés à la pression des touches afin d'empêcher la soumission du formulaire:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.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 la soumission réelle, vous pouvez ajouter la ligne "return false" au gestionnaire onsubmit comme ceci:

<form onsubmit="return false;">

L'appel de submit () sur le formulaire à partir de JavaScript ne déclenchera 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 les Enters dans les textes saisis. Placez-le dans une fonction prête pour le document et oubliez ce problème pour la vie.

Au lieu d'empêcher les utilisateurs d'appuyer sur Enter, ce qui peut sembler anormal, vous pouvez laisser le formulaire tel quel et ajouter 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 joli message disant ce qui doit être terminé pour remplir le formulaire. Si vous utilisez jQuery, essayez le plugin Validation:

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

Cela nécessitera plus de travail que d'attraper le Enterbouton, mais cela offrira sûrement une expérience utilisateur plus riche.

Une jolie petite solution jQuery simple:

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

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

La réponse acceptée est ok-ish, mais elle n'a pas empêché la soumission sur le pavé numérique. Au moins dans la version actuelle de Chrome. J'ai dû modifier la condition du code clé pour cela, puis cela fonctionne.

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

C'est ma solution pour atteindre l'objectif, c'est propre et efficace.

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

Une approche complètement différente:

1. Le premier <button type="submit">du formulaire sera activé en appuyant sur Enter.
2. Cela est vrai même si le bouton est masqué avec style="display:none;
3. Le script de ce bouton peut revenir false, ce qui interrompt le processus de soumission.
4. Vous pouvez toujours en avoir un autre <button type=submit>pour soumettre le formulaire. Revenez simplement truepour mettre en cascade la soumission.
5. Appuyez sur Enteralors que le bouton de soumission réel est focalisé pour activer le bouton de soumission réel.
6. Appuyer à l' Enterintérieur <textarea>ou sur d'autres contrôles de formulaire se comportera normalement.
7. Appuyer à l' Enterintérieur des <input>contrôles de formulaire déclenchera le premier <button type=submit>, qui revient false, et donc rien ne se passe.

Donc:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

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

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Ne pas mettre un bouton de soumission pourrait faire l'affaire. Il suffit de mettre un script à l'entrée (type = bouton) ou d'ajouter eventListener si vous voulez qu'il soumette les données dans le formulaire.

Utilisez plutôt ceci

<input type="button">

que d'utiliser cela

<input type="submit">

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

J'avais besoin d'empêcher seulement des entrées spécifiques de soumettre, j'ai donc utilisé un sélecteur de classe, pour que cela soit une fonctionnalité "globale" partout où j'en ai besoin.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Et ce code jQuery:

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

Alternativement, si la clé est insuffisante:

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

Quelques notes:

En modifiant ici diverses bonnes réponses, la Enterclé semble fonctionner pour keydowntous les navigateurs. Pour l'alternative, j'ai mis bind()à jour la on()méthode.

Je suis un grand fan des sélecteurs de classe, pesant tous les avantages et les inconvénients et les discussions sur les performances. Ma convention de dénomination est «idSomething» pour indiquer que jQuery l'utilise comme identifiant, pour le séparer du style CSS.

Vous pouvez créer une méthode JavaScript pour vérifier si la Enterclé a été frappée, et si c'est le cas, pour arrêter la soumission.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Appelez simplement cela sur la méthode de soumission.

BLOQUER SEULEMENT SOUMETTRE mais pas d'autres fonctionnalités importantes de la touche Entrée, telles que la création d'un nouveau paragraphe dans un <textarea>:

window.addEventListener('keydown', function(event) {
  //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) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

C'est le moyen idéal, vous ne serez pas redirigé depuis votre page

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

J'ai eu un problème similaire, où j'avais une grille 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 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 retirer type="submit"et de mettreonclick="document.forms[0].submit()

Je pense qu'il 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 la touche onkeypress du formulaire pour que Enter appelle votre soumission comme prévu:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Le onkeypress JS pourrait être tout ce que vous devez faire. Il n'est pas nécessaire de procéder à un changement global plus important. Cela est particulièrement vrai si vous n'êtes pas le seul à coder l'application à partir de zéro, et que vous avez été amené à réparer le site Web de quelqu'un d'autre sans le déchirer et le tester à nouveau.

Il y a déjà beaucoup de bonnes réponses ici, je veux juste apporter quelque chose du point de vue UX. Les commandes du clavier dans les formulaires sont très importantes.

La question est de savoir comment désactiver la soumission en appuyant sur une touche Enter. Pas comment ignorer Enterdans une application entière. Pensez donc à attacher le gestionnaire à un élément de formulaire, pas à la fenêtre.

La désactivation Enterde la soumission du formulaire devrait toujours permettre ce qui suit:

1. Soumission du formulaire via le Enterbouton Soumettre.
2. Soumission du formulaire lorsque tous les champs sont remplis.
3. Interaction avec les boutons de non-soumission via Enter.

Ce n'est qu'un passe-partout, mais il suit les trois conditions.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Quelque chose à laquelle je n'ai pas vu de réponse ici: lorsque vous parcourez les éléments de la page, appuyez sur Enterlorsque vous accédez au bouton d'envoi pour déclencher le gestionnaire onsubmit sur le formulaire, mais il enregistrera l'événement comme un événement MouseEvent. Voici ma courte solution pour couvrir la plupart des bases:

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

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

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/

Dans mon cas spécifique, j'ai dû empêcher ENTER de soumettre le formulaire et simuler le clic du bouton soumettre. C'est parce que le bouton d'envoi avait un gestionnaire de clics parce que nous étions dans une fenêtre modale (ancien code hérité). En tout cas, voici mes solutions combo 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.

Ça marche pour moi

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

Je voudrais ajouter un peu de 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 bonne astuce dans la clause à moins.)

Utilisation de Javascript (sans vérifier aucun champ de saisie):

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

Si quelqu'un souhaite l'appliquer à des champs spécifiques, par exemple le texte du type d'entrée:

<script>
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 fonctionne bien dans mon cas.

Allez dans votre CSS et ajoutez-le, puis bloquera automatiquement la soumission de votre formulaire tant que vous aurez soumis une entrée si vous ne le souhaitez plus, vous pouvez le supprimer ou taper activateet à la deactivateplace

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Vous pouvez également utiliser javascript:void(0)pour empêcher la soumission du formulaire.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

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 globales, quelque chose 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!');}
    );
});

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

<form id='form1' method='POST' action=''>
    // Your form data
</form>