Empêcher la soumission d'un formulaire avec la touche Entrée

Question

Empêcher la soumission d'un formulaire avec la touche Entrée

Demandé el 13 de Octobre, 2009: Quand la question a-t-elle été
41798 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je viens d'écrire une petite fonction astucieuse qui fonctionne sur le formulaire lui-même...

$("#form").keypress(function(e) {
    if (e.which == 13) {
        var tagName = e.target.tagName.toLowerCase(); 
        if (tagName !== "textarea") {
            return false;
        }
    }
});

Dans ma logique, je veux accepter les retours chariot lors de la saisie d'un textarea. En outre, il serait utile de remplacer la touche d'entrée des champs de saisie par un comportement permettant de passer au champ de saisie suivant (comme si la touche de tabulation était enfoncée). Quelqu'un connaît-il un moyen d'utiliser le modèle de propagation d'événements pour déclencher correctement la touche d'entrée sur l'élément approprié, mais empêcher la soumission du formulaire lorsqu'elle est enfoncée ?

Demandé el 13 de Octobre, 2009 par Dmitriy Likhten

13 votes

Je viens de réaliser que je renvoyais false sur l'événement KeyUp au lieu de KeyPress, ce qui n'arrête pas le postback. J'ai juste pensé que je devais le mentionner au cas où quelqu'un aurait le même problème que moi.

Commenté el 6 de Novembre, 2009 par Kenneth J

1 votes

Il manque la dernière ligne)

Commenté el 18 de Août, 2014 par Robbie Smith

0 votes

Et la terminaison ;

Commenté el 14 de Décembre, 2016 par Stack Underflow

Answer 1

5 Réponses

Answer 2

54voto

Jakobud Points 14581

Vous pouvez imiter la pression de la touche de tabulation au lieu de la touche d'entrée sur les entrées comme ceci :

//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
    if ( e.which == 13 ) // Enter key = keycode 13
    {
        $(this).next().focus();  //Use whatever selector necessary to focus the 'next' input
        return false;
    }
});

Vous devrez évidemment déterminer quel(s) sélecteur(s) est (sont) nécessaire(s) pour mettre l'accent sur la suivant lorsque vous appuyez sur la touche Entrée.

Répondu el 13 de Octobre, 2009 par Jakobud (14581 Points )

0 votes

Doivent être ajoutés Retourner faux ;

Commenté el 6 de Février, 2013 par Craig

0 votes

J'aime la façon dont vous bloquez l'entrée entière avec ce return false ; return false doit être déplacé dans le bloc de condition. Sinon, il faut utiliser return true.

Commenté el 16 de Décembre, 2013 par Andy

0 votes

Comment éviter que le curseur ne se focalise sur les champs de saisie en lecture seule, en sautant par exemple les champs en lecture seule ?

Commenté el 7 de Juin, 2015 par Aitazaz Khan

Afficher 2 autres commentaires

Answer 3

40voto

philipphoffmann Points 191

Notez que les formulaires à saisie unique sont toujours soumis lorsque vous appuyez sur la touche Entrée. La seule façon d'éviter que cela ne se produise est la suivante :

<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>

Répondu el 25 de Août, 2012 par philipphoffmann (191 Points )

4 votes

+1 pour votre conseil : les formulaires à saisie unique sont toujours soumis lorsque la touche Entrée est enfoncée.

Commenté el 17 de Juillet, 2013 par Vipul

1 votes

Absolument génial !

Commenté el 5 de Avril, 2021 par Muhammad Ali

Answer 4

27voto

Dmitriy Likhten Points 1685

Voici une version modifiée de ma fonction. Elle fait ce qui suit :

Empêche la touche d'entrée de fonctionner sur tout élément du formulaire autre que que la zone de texte, le bouton, la soumission.
La touche d'entrée agit maintenant comme une tabulation.
preventDefault(), stopPropagation() sont invoqués sur l'élément, mais invoqués sur le formulaire, ils semblent empêcher l'événement d'atteindre l'élément.

Ma solution consiste donc à vérifier le type d'élément. Si le type n'est pas un textarea (entrée autorisée) ou un bouton/submit (entrée = clic), nous passons simplement à l'élément suivant.

Invoquer .next() sur l'élément n'est pas utile car les autres éléments peuvent ne pas être de simples frères et sœurs, mais comme le DOM garantit l'ordre lors de la sélection, tout va bien.

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
}

Répondu el 14 de Octobre, 2009 par Dmitriy Likhten (1685 Points )

0 votes

Au cas où ce ne serait pas clair, preventEnterSubmit est un gestionnaire de la fonction keypress événement.

Commenté el 28 de Janvier, 2013 par Álvaro G. Vicario

0 votes

Si vous ajoutez le support de la sélection, ce sera mieux.

Commenté el 7 de Juin, 2015 par Aitazaz Khan

0 votes

Pour une raison quelconque, j'ai juste puede no pour que ça marche. jQuery('#form_id').onkeypress(preventEnterSubmit(e); renvoie une erreur de référence indiquant que e est introuvable ; il en va de même avec des méthodes plus détournées telles que jQuery('#form_id').addEventListener('keypress', preventEnterSubmit(e)); Qu'est-ce qui manque ici ?

Commenté el 23 de Février, 2018 par Kaji

Answer 5

6voto

Jarón Barends Points 95

Du point de vue de la convivialité, modifier le comportement de l'entrée pour imiter un onglet est une très mauvaise idée. Les utilisateurs ont l'habitude d'utiliser la touche Entrée pour soumettre un formulaire. C'est ainsi que fonctionne l'Internet. Vous ne devez pas le rompre.

Répondu el 3 de Février, 2011 par Jarón Barends (95 Points )

10 votes

Pas nécessairement tout le temps. S'il est suffisamment clair qu'un autre champ doit être rempli, il est possible de forcer la tabulation. Pour autant que le champ suivant doive effectivement être rempli.

Commenté el 8 de Avril, 2011 par George Bailey

10 votes

Ou si vous utilisez des lecteurs de codes-barres, qui envoient automatiquement une touche d'entrée lorsqu'ils ont fini d'envoyer le numéro du code-barres.

Commenté el 17 de Juin, 2011 par bestattendance

2 votes

Et... Safari utilise la touche Entrée pour sélectionner lorsque vous essayez de faire une sélection manuelle dans une liste - c'est nul, mais c'est ce qu'il fait.

Commenté el 23 de Août, 2011 par Ghoti

Afficher 3 autres commentaires

Answer 6

3voto

M009 Points 607

Le post Enter Key as the Default Button décrit comment définir le comportement par défaut pour l'appui sur la touche Entrée. Cependant, il arrive que vous ayez besoin de désactiver la soumission du formulaire lorsque vous appuyez sur la touche Entrée. Si vous voulez l'empêcher complètement, vous devez utiliser le gestionnaire OnKeyPress sur la balise de votre page.

<body OnKeyPress="return disableKeyPress(event)">

Le code javascript devrait être :

<script language="JavaScript">

function disableEnterKey(e)
{
     var key;      
     if(window.event)
          key = window.event.keyCode; //IE
     else
          key = e.which; //firefox      

     return (key != 13);
}

</script>

Si vous souhaitez désactiver la soumission du formulaire lorsque la touche Entrée est enfoncée dans un champ de saisie, vous devez utiliser la fonction ci-dessus sur le gestionnaire OnKeyPress du champ de saisie comme suit :

<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">

Source : http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Répondu el 17 de Mai, 2012 par M009 (607 Points )

0 votes

C'est la seule solution qui fonctionne pour moi. Dans mon cas, il s'agissait d'un formulaire avec des options de remplissage automatique et lorsque vous choisissez une option, vous appuyez sur la touche Entrée, n'est-ce pas ? Dans mon cas, l'option choisie n'a pas été transmise à la fonction js mais plutôt le formulaire a été soumis. Maintenant je peux utiliser l'api google maps avec cette petite astuce de blocage. Cela fonctionne aussi pour Google Chrome. Merci.

Commenté el 6 de Juillet, 2018 par Yevgeniy Afanasyev

0 votes

@YevgeniyAfanasyev Je suis heureux que vous trouviez ma solution utile :)

Commenté el 9 de Août, 2018 par M009

Empêcher la soumission d'un formulaire avec la touche Entrée

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Empêcher la soumission d'un formulaire avec la touche Entrée

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: