Empêcher les utilisateurs de soumettre un formulaire en tapant entrée

ne pas autoriser entrer la clé n'importe où

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

<form ... onkeypress="return event.keyCode != 13;">

ou avec jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

cela provoquera que chaque pression de clé à l'intérieur du formulaire sera vérifiée sur le code de clé. Si elle n'est pas 13 (la touche Enter), alors elle retournera true et tout ira comme prévu. S'il est 13 (la clé Enter), alors il sera return false et n'importe quoi s'arrêtera immédiatement, de sorte que le formulaire ne sera pas soumis.

l'événement keypress est préféré à keydown car il n'est déclenché que lorsque le caractère est réellement inséré. Le keydown (et keyup ) est déclenché lorsque toute clé est pressée, y compris les clés de contrôle. Et, le keyCode de keypress représente le caractère réel étant inséré, pas la clé physique utilisée. De cette façon, vous n'avez pas besoin de vérifier explicitement si la touche Entrée (108) est pressée aussi. Le keyup est trop tard pour bloquer le formulaire soumettre.

notez que $(window) comme suggéré dans d'autres réponses au lieu de $(document) ne fonctionne pas pour keydown / keypress / keyup dans IE<=8, donc ce n'est pas un bon choix si vous aimez couvrir ces pauvres utilisateurs aussi bien.

Autoriser entrer la touche sur textareas seulement

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

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

pour réduire le boilerplate, il est préférable de le faire avec jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

si vous avez d'autres fonctions de gestionnaire d'événements attachées sur ces éléments d'entrée, que vous souhaitez également invoquer sur la touche enter pour une raison quelconque, alors seulement prévient le comportement par défaut de l'événement au lieu de retourner false, afin qu'il puisse se propager correctement aux autres gestionnaires.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Autoriser entrer la touche sur textareas et soumettre des boutons seulement

si vous souhaitez autoriser la touche enter sur les boutons soumettre <input|button type="submit"> aussi, alors vous pouvez toujours affiner le sélecteur comme ci-dessous.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

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

j'ai dû saisir les trois événements liés à la pression des touches afin d'empêcher le formulaire d'être soumis:

    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 faire le fichier submit, vous pouvez ajouter la ligne" return false "au gestionnaire onsubmit comme ceci:

<form onsubmit="return false;">

appeler submit() sur le formulaire à partir de JavaScript ne déclenchera pas l'événement.

utiliser:

$(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 sur un site web (également sur les formulaires insérés avec Ajax), empêchant seulement entrer s dans les textes d'entrée. Placez - le dans une fonction de prêt de document, et oubliez ce problème pour une vie.

au lieu d'empêcher les utilisateurs d'appuyer sur entrez , ce qui peut sembler contre-nature, vous pouvez laisser le formulaire tel quel et ajouter une validation supplémentaire côté client: lorsque le sondage n'est pas terminé, le résultat n'est pas envoyé au serveur et l'utilisateur reçoit un beau message indiquant ce qui doit être terminé pour remplir le formulaire. Si vous utilisez jQuery, essayez le plugin de Validation:

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

cela demandera plus de travail que d'attraper le bouton entrer , mais sûrement cela fournira une expérience utilisateur plus riche.

une jolie petite solution de jQuery simple:

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

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

Accepté réponse est ok-ish, mais ce n'était pas l'arrêt de présenter sur la touche entrée. Au moins dans la version actuelle de Chrome. J'ai dû modifier le code pour ça, puis ça a marché.

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

C'est ma solution pour atteindre l'objectif, il 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"> dans la forme sera activé en appuyant sur entrer .
2. C'est vrai même si le bouton est caché avec style="display:none;
3. le script de ce bouton peut retourner false , ce qui interrompt le processus de soumission.
4. vous pouvez encore avoir un autre <button type=submit> pour soumettre le formulaire. Il suffit de retourner true pour faire passer la soumission en cascade.
5. presser entrer pendant que le bouton Soumettre réel est focalisé activera le bouton Soumettre réel.
6. presser entrer à l'intérieur de <textarea> ou d'autres contrôles se comporteront normalement.
7. en Appuyant sur Entrée à l'intérieur <input> contrôles de formulaire sera déclencher le premier <button type=submit> , qui renvoie false , et donc rien ne se produit.

ainsi:

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

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

Section 4.10.22.2 soumission implicite of the W3C HTML5 spec says:

Un form de l'élément bouton par défaut est le premier "1519130920 bouton" soumettre dans l'arbre de commande dont "1519170920 formulaire" propriétaire est que form élément.

si l'agent utilisateur supporte laisser l'utilisateur soumettre un formulaire implicitement (par exemple, sur certaines plates-formes appuyant sur la touche "Entrée" alors qu'un champ de texte est focalisé implicitement soumet le formulaire), puis le faire pour un formulaire dont bouton par défaut a un défini comportement d'activation doit provoquer l'agent de l'utilisateur à exécuter des étapes d'activation de clic synthétique sur ce bouton par défaut .

Note: 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 pas de 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 est de placer un bouton de soumission désactivé comme premier bouton de soumission dans le 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 nécessaire pour empêcher la soumission de formulaires implicites.

j'avais besoin d'empêcher seulement des entrées spécifiques de soumettre, donc j'ai utilisé un sélecteur de classe, pour laisser ceci être 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 le keydown est insuffisant:

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

Quelques notes:

modifiant diverses bonnes réponses ici, la touche Enter semble fonctionner pour keydown sur tous les navigateurs. Pour l'alternative, j'ai mis à jour bind() à la méthode on() .

je suis un grand fan des sélecteurs de classe, pesant tous les avantages et les inconvénients et les discussions de performance. Ma convention de nommage est 'idSomething' pour indiquer que jQuery l'utilise comme un id, pour le séparer du style CSS.

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

vous pouvez faire une méthode JavaScript pour vérifier si la touche Enter a été activée, et si c'est le cas, pour arrêter le fichier submit.

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

appelle ça sur la méthode submit.

ne pas mettre un bouton Soumettre pourrait faire. 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.

plutôt utiliser ce

<input type="button">

que d'utiliser ce

<input type="submit">

j'ai eu un problème similaire, où j'ai eu une grille avec" ajax textfields " (Yii Cridview) et juste un bouton Soumettre. Chaque fois que j'ai fait une recherche sur un champ de texte et ai frappé entrer le formulaire soumis. J'ai dû faire quelque chose avec le bouton parce que c'était le seul bouton commun entre les vues (motif MVC). Tout ce que j'ai eu à faire était d'enlever type="submit" et mettre onclick="document.forms[0].submit()

je pense que c'est bien couvert avec toutes les réponses, mais si vous utilisez un bouton avec un peu de code de validation JavaScript, vous pouvez simplement définir le formulaire onkeypress pour Enter pour appeler votre soumettre comme prévu:

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

L'onkeypress JS pourrait être tout ce que vous devez faire. Il n'y a pas besoin d'un changement global plus important. C'est particulièrement vrai si vous n'êtes pas celui qui Code l'application à partir de zéro, et vous avez été amené à réparer le site Web de quelqu'un d'autre sans le déchirer et le tester à nouveau.

dans mon cas précis, J'ai dû empêcher ENTER de soumettre le formulaire et simuler le clic du bouton Soumettre. C'est parce que le bouton Soumettre avait un gestionnaire de clic dessus parce que nous étions dans une fenêtre modale (héritée ancien code). En tout cas, voici mes solutions combo pour cette affaire.

    $('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.

Cela fonctionne pour moi

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

quelque chose que je n'ai pas vu répondu ici: lorsque vous tabulez à travers les éléments sur la page, en appuyant sur entrer lorsque vous arrivez au bouton Soumettre déclenchera le handler onsubmit sur le formulaire, mais il enregistrera l'événement comme un MouseEvent. Voici ma courte solution pour couvrir la plupart des bases:

Ce n'est pas un jQuery liés à la réponse

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 /

j'aimerais ajouter un petit 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 le tour de nice dans le sauf clause.)

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

la question Est de savoir comment désactiver la soumission sur la touche Enter . Pas comment ignorer Enter dans une application complète. Pensez donc à attacher le handler à un élément de forme, pas à la fenêtre.

Désactivation Enter pour l'envoi du formulaire doit permettre toujours ce qui suit:

1. Formulaire de présentation par le biais de Enter lorsque le bouton soumettre.
2. soumission du formulaire lorsque tous les champs sont remplis.
3. Interaction avec les boutons de soumission via Enter .

il s'agit d'une simple bobine, mais elle respecte 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;
  }
});

seulement le bloc soumettre mais pas d'autres fonctionnalités importantes de la clé enter, telles que la création d'un nouveau paragraphe dans un <textarea> :

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

cela a fonctionné pour moi dans tous les navigateurs après beaucoup de frustration avec d'autres solutions. La fonction name_space exterieur est juste pour rester loin de déclarer des globals, 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;    
        }
    }
}

utilisation de L'échantillon:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

dans mon cas, j'ai eu un couple de jQuery UI champs autocomplete et textareas sous une forme, donc je voulais certainement qu'ils acceptent entrer . J'ai donc supprimé l'entrée type="submit" d'un formulaire et ajouté une ancre <a href="" id="btn">Ok</a> à la place. Puis je l'ai coiffé comme un bouton et j'ai ajouté le code suivant:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Si un utilisateur remplit tous les champs requis, validateData() réussit et le formulaire soumet.

utiliser:

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