Empêcher les utilisateurs de soumettre un formulaire en appuyant sur Entrée

https://stackoverflow.com/questions/895171

23-08-2019
|

Question

J'ai une enquête sur un site Web, et il semble y avoir quelques problèmes avec les utilisateurs en appuyant sur entrée (je ne sais pas pourquoi) et soumettre accidentellement l'enquête (formulaire) sans cliquer sur le bouton Envoyer. Est-ce qu'il y a un moyen d'éviter cela?

J'utilise HTML, PHP 5.2.9 et jQuery sur l'enquête.

La solution

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 original, pour le rendre plus facile à utiliser et permettent aux gens de presse Entrée si elles 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;
    }
  });
});

Autres conseils

Disallow entrer partout touche

Si vous ne disposez pas d'un <textarea> dans votre formulaire, puis il suffit d'ajouter 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é sur le key. Dans le cas contraire Enter, il retournera true et tout continue comme d'habitude. Si elle est Enter, il retournera false et tout ce qui arrêtera immédiatement, de sorte que le formulaire ne sera pas soumis.

est préférable L'événement keydown sur keyup comme keyup est trop tard pour bloquer formulaire soumettre. Par le passé il y avait aussi keypress , mais cela est dépréciée , tout comme le KeyboardEvent.keyCode . Vous devez utiliser KeyboardEvent.key au lieu qui retourne le nom du touche enfoncée. Lorsque Enter est cochée, ce vérifierait 13 (normal entrer), ainsi que 108 (numpad entrer).

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

Laisser entrer la clé sur textareas seulement

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

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

Pour réduire boilerplate, ce qui est mieux à 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 associés à ces éléments d'entrée, que vous souhaitez également invoquer sur la touche entrée pour une raison quelconque, empêcher que le comportement par défaut de l'événement au lieu de retourner faux, alors il peut bien se propager à d'autres gestionnaires .

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

Laisser entrer la clé sur textareas et boutons d'envoi uniquement

Si vous souhaitez laisser entrer la clé sur les boutons d'envoi <input|button type="submit"> aussi, 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 d'autres réponses ne couvre pas les HTML5 entrées non-texte, de sorte que ce n'est pas un bon sélecteur.

Je devais prendre les trois événements liés aux touches urgentes afin d'éviter 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(); }
    });

Section 4.10.22.2 soumission implicite de la spécification HTML5 du W3C dit:

form bouton de l'élément par défaut est le premier bouton submit pour arbre dont est que form élément.

Si l'agent utilisateur prend en charge permettant à l'utilisateur de soumettre une forme implicite (par exemple, sur certaines plates-formes appuyant sur la touche « entrée » alors qu'un champ de texte se concentre soumet implicitement la forme), puis en faisant donc une forme dont bouton par défaut a défini comportement d'activation » rel = "noreferrer" doit faire l'agent utilisateur Exécuter étapes d'activation de clic synthétique sur ce bouton par défaut de rel="noreferrer">.


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 pas quand il est désactivé.)

Par conséquent, conforme aux standarts façon de désactiver toute soumission implicite de la forme est de placer un bouton d'envoi désactivé comme le premier bouton d'envoi sous la forme:

<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 belle caractéristique de cette approche est que cela fonctionne sans JavaScript ; si JavaScript est activé, il faut un navigateur Web conforme aux normes pour empêcher la soumission de forme implicite.

Si vous utilisez un script pour faire le soumettre réel, vous pouvez ajouter la ligne « return false » au gestionnaire onsubmit comme ceci:

<form onsubmit="return false;">

Appel submit () sur le formulaire de JavaScript ne déclenche 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 toutes les formes sur un site Web (également sur les formulaires insérés avec l'Ajax), ce qui empêche que Entrée s dans les textes d'entrée. Placez-le dans un document fonction prêt, et oublier ce problème pour une vie.

Au lieu d'empêcher les utilisateurs d'appuyer sur Entrée , ce qui peut sembler contre nature, vous pouvez laisser le formulaire tel quel et ajouter des fonctionnalités supplémentaires validation côté client: Lorsque l'enquête n'est pas terminé, le résultat est pas envoyé au serveur et l'utilisateur reçoit un message bien dire 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 nécessitera plus de travail que d'attraper le Enter , mais sûrement, il offrira une expérience utilisateur plus riche.

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

Acceptée réponse est ok-ish, mais il n'a pas arrêter de soumettre à numpad entrer. Au moins dans la version actuelle de Chrome. Je devais modifier l'état du mot de code à cela, il fonctionne.

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

Une belle petite solution simple, jQuery:

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

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

La première <button type="submit"> sous la forme sera activé sur la touche Entrée .
Ceci est vrai même si le bouton est cachée avec style="display:none;
Le script de ce bouton peut revenir false, ce qui annule le processus de soumission.
Vous pouvez toujours avoir une autre <button type=submit> de soumettre le formulaire. Il suffit de revenir true en cascade la soumission.
Appuyez sur Entrée alors que le vrai bouton de soumission est focalisé activera le bouton réel soumettre.
Appuyez sur Entrée à l'intérieur <textarea> ou d'autres contrôles se comportent normalement.
Appuyez sur Entrée à l'intérieur des contrôles de formulaire de <input> déclencheront la première <button type=submit>, qui retourne false, et donc rien ne se passe.

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>

Donner la forme d'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>

Je avais besoin pour empêcher les entrées seulement spécifiques de soumettre, donc j'ai utilisé un sélecteur de classe, pour que cela soit une caractéristique « globale » où je en ai besoin.

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

Et ce code jQuery:

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

Par ailleurs, si keydown est insuffisant:

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

Quelques notes:

Modification diverses bonnes réponses ici, le Entrée clé semble fonctionner pour keydown sur tous les navigateurs. Pour l'alternative, je mis à jour bind() à la méthode on().

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

Ne pas utiliser type = "submit" pour les entrées ou les boutons.
Utiliser type = "button" et utiliser [js Jquery / angulaire / etc] pour soumettre le formulaire au serveur.

Vous pouvez faire une méthode JavaScript afin de vérifier si le Entrée clé a été frappé, et si elle est, pour arrêter le soumettre.

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

Il suffit d'appeler que la méthode soumettre.

Ne pas mettre un bouton d'envoi pourrait faire. Il suffit de mettre un script à l'entrée (type = bouton) ou ajouter eventListener si vous le souhaitez soumettre les données sous forme.

utilisez plutôt cette

<input type="button">

que d'utiliser cette

<input type="submit">

J'ai eu un problème similaire, où j'avais une grille avec « ajax » textfields (CGridView) et Yû un seul bouton soumettre. Chaque fois que je fait une recherche sur un champ de texte et appuyez sur Entrée le formulaire soumis. Je devais faire quelque chose avec le bouton parce qu'il était le seul bouton commun entre les vues (motif MVC). Tout ce que je devais faire était enlever type="submit" et mettre onclick="document.forms[0].submit()

Je pense qu'il est bien couvert de toutes les réponses, mais si vous utilisez un bouton avec un code de validation JavaScript vous pouvez simplement définir pour Entrez appeler votre soumettre comme prévu le onkeypress du formulaire:

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

Les onkeypress JS pourrait être tout ce que vous devez faire. Il n'y a pas besoin d'un plus grand, changement global. Cela est particulièrement vrai si vous n'êtes pas celui de codage de l'application à partir de zéro, et vous avez été amené dans une personne fixe le site web d'un autre sans le déchirer et re-tester.

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

La question est de savoir comment désactiver de la soumission sur Enter keypress. Comment ignorer Enter dans une application entière. considérer la fixation du gestionnaire Donc à un élément de forme, et non pas la fenêtre.

Désactivation Enter pour la soumission de formulaire doit encore permettre à ce qui suit:

l'envoi du formulaire via Enter lorsque le bouton submit est concentré.
soumission de formulaire lorsque tous les champs sont remplis.
Interaction avec les non-boutons de soumission via Enter.

Ceci est juste boilerplate 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;
  }
});

SEULEMENT BLOC SOUMETTRE mais pas les autres fonctionnalités importantes d'entrer la clé, comme 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>

Dans mon cas particulier, je devais arrêter de soumettre ENTRER la forme et simulent également le clic du bouton soumettre. En effet, le bouton d'envoi avait un gestionnaire de cliquer dessus parce que nous étions dans une fenêtre modale (ancien code hérité). Dans tous les 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 qui travaillent 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 de réponse ici: lorsque vous onglet par les éléments de la page, en appuyant sur Entrée quand vous arrivez à le bouton Soumettre déclenchera le gestionnaire onsubmit sur la forme, mais il enregistrera l'événement comme 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 un exemple de travail: https://jsfiddle.net/nemesarial/6rhogva2/

Je voudrais 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 l'astuce dans la clause, à moins.)

Allez dans votre css et ajouter que ce sera alors automatiquement bloquer la soumission de votre formular aussi longtemps que vous avez soumettre entrée si vous ne voulez plus vous pouvez le supprimer ou le type activate et deactivate à la place

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

Utilisation Javascript (sans vérifier un champ d'entrée):

<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 veut appliquer cela sur des domaines spécifiques, par exemple saisie de texte du type:

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

a travaillé pour moi dans tous les navigateurs après beaucoup de frustration avec d'autres solutions. La fonction extérieure NAME_SPACE est juste pour rester à l'écart de déclarer globals, quelque chose que je vous 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!');}
    );
});

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>

Dans mon cas, j'ai eu quelques champs de saisie semi-automatique et textareas de jQuery UI sous forme , alors je les ai vraiment voulu accepter Entrée . Donc, je l'ai enlevé l'entrée type="submit" d'une forme et ajouté un <a href="" id="btn">Ok</a> d'ancrage à la place. Ensuite, je Styled comme un bouton et 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 obligatoires, validateData() et la forme réussit soumet.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow