Soumettre un formulaire sur 'Entrée' avec jQuery?


427

J'ai un formulaire de connexion standard - un champ de texte de courrier électronique, un champ de mot de passe et un bouton d'envoi sur un projet AIR qui utilise HTML / jQuery. Lorsque j'appuie sur Entrée sur le formulaire, le contenu de l'ensemble du formulaire disparaît, mais le formulaire n'est pas envoyé. Est-ce que quelqu'un sait s'il s'agit d'un problème avec Webkit (Adobe AIR utilise Webkit pour HTML) ou si j'ai groupé les choses?

J'ai essayé:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

Mais cela n'a ni arrêté le comportement de compensation, ni soumis le formulaire. Il n'y a aucune action associée au formulaire - pourrait-il s'agir du problème? Puis-je mettre une fonction javascript dans l'action?


3
Avez-vous vraiment un attribut class = "input" sur votre <input ...? Il semble que ce devrait être $ ('input').
Keypress

Les classes sont générées par programmation par un CMS. En dehors de cela, cependant, l'étendre à $ ('input') affecterait chaque entrée de la page, peu importe si je voulais le comportement ou non. Désolé, cela offense votre sensibilité.
be hollenbeck

15
Sensibilités pas du tout offensées. Je pensais juste que c'était peut-être une erreur qui avait conduit au problème. Continuer.
NexusRex

1
FYI: Votre réponse acceptée n'est pas entièrement exacte. Reportez-vous à ma réponse ci-dessous.
NoBrainer

Réponses:


399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Découvrez cette réponse stackoverflow: event.preventDefault () vs return false

Essentiellement, "return false" équivaut à appeler e.preventDefaultet e.stopPropagation().


3
Notez qu'ils ne sont pas identiques. IE8 n'a pas e.preventDefault. Pour IE8, utilisez event.returnValue = false;
mbokil

8
@mbokil Sauf que lors de l'utilisation de jQuery, c'est la même chose dans IE8. et IE7. Et IE6.
Kevin B

Si vous voulez d'abord taper dans les champs de saisie, mettez le "return false;" à l'intérieur de l'instruction if.
Juni Brosas du

173

En plus de retourner faux comme Jason Cohen l'a mentionné. Vous devrez peut-être également empêcher

e.preventDefault();

13
comme @NoBrainer l'a dit, c'est faux: return falsedans un événement géré par jQuery, appelez automatiquement e.preventDefault ()
Riccardo Galli

83

Je ne sais pas si cela vous aidera, mais vous pouvez essayer de simuler un clic sur le bouton Envoyer, au lieu de soumettre directement le formulaire. J'ai le code suivant en production, et cela fonctionne très bien:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Remarque: jQuery ('# submit'). Focus () rend le bouton animé lorsque vous appuyez sur Entrée.


2
Fonctionne très bien mais j'ai dû ajouter "return false;" pour empêcher la soumission de formulaires doubles.
code90

Travailler | Voir BEAUCOUP de résultats comme celui-ci en parlant de trigger, sendkey, etc., doh, blah ..., mais c'est le seul qui fonctionne pour moi et envoie vraiment un clic sur un bouton. Ne pas soumettre (). Donc, l'astuce était les fonctions focus (). Click () en toute sécurité. MERCI.
m3nda

Fonctionne, mais j'ai dû mettre ce code sous: $ (document) .ready (function () {...
shasi kanth


30

Y a-t-il une raison pour laquelle vous devez accrocher et tester la touche Entrée?

Ne pourriez-vous pas simplement ajouter un

<input type="submit" /> 

à votre formulaire et doit-il naturellement être soumis lorsque la saisie est poussée? Vous pouvez même alors accrocher l' onsubmitaction du formulaire et appeler une fonction de validation à partir de là si vous le souhaitez ...

Vous pouvez même utiliser le onsubmitcomme test pour voir si votre formulaire est envoyé, mais cela ne fonctionnera pas si vous appelez form.submit().


1
Entièrement d'accord. Ma préférence serait toujours d'utiliser la fonctionnalité native du navigateur (les entrées de type = soumettre répondent nativement à une pression de touche d'entrée) plutôt que d'ajouter d'autres scripts compliqués.
Aaron

1
Le problème est, que se passe-t-il si vous faites des choses ajax et qu'il n'y a pas de véritable publication sur le serveur, mais que vous voulez que l'interface utilisateur se comporte comme prévu par l'utilisateur?
devlord

En effet ... j'avais négligé le tout return false;.
devlord

14

Voici un moyen de le faire en tant que plugin JQuery (au cas où vous voudriez réutiliser la fonctionnalité):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Maintenant, si vous voulez décorer un <input>élément avec ce type de fonctionnalité, c'est aussi simple que cela:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

12

Vous pouvez également simplement ajouter onsubmit="return false"au code du formulaire dans la page pour éviter le comportement par défaut.

Ensuite, accrochez ( .bindou .live) l' submitévénement du formulaire à n'importe quelle fonction avec jQuery dans le fichier javascript.

Voici un exemple de code pour vous aider:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

Cela fonctionne à partir du 2011-04-13, avec Firefox 4.0 et jQuery 1.4.3


Cela ne fonctionne pas dans Chrome. Soumettra quand même.
Marcelo Agimóvel

5

Voici mon code:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

4

De plus, pour maintenir l'accessibilité, vous devez l'utiliser pour déterminer votre code de clé:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

3

Ajout juste pour une mise en œuvre facile. Vous pouvez simplement créer un formulaire puis masquer le bouton d'envoi:

Par exemple:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

@cebirci et quelle version est votre chrome? J'ai testé des ordinateurs portables au PC et mon code fonctionne. Essayez de télécharger le dernier chrome avant de le noter dans ma réponse.
Joem Maranan

2

J'utilise maintenant

$("form").submit(function(event){
...
}

Au début, j'ai ajouté un gestionnaire d'événements au bouton de soumission, ce qui a produit une erreur pour moi.


1

J'ai découvert aujourd'hui que l'événement keypress n'est pas déclenché lorsque vous appuyez sur la touche Entrée, vous pouvez donc basculer à la place sur keydown () ou keyup ().

Mon script de test:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

La sortie dans la console lorsque vous tapez "A Entrez B" sur le clavier:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

Vous voyez dans la deuxième séquence la «pression de touche» est manquante, mais le code d'enregistrement de touche et de touche «13» est enfoncé / relâché. Selon la documentation jQuery sur la touche de fonction () :

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Testé sur IE11 et FF61 sur Server 2012 R2


0

Dans les codes HTML:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

Dans les codes Js:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

1
Veuillez ne pas publier de réponses identiques à plusieurs questions. Postez une bonne réponse, puis votez / marquez pour fermer les autres questions en double. Si la question n'est pas un doublon, adaptez vos réponses à la question.
Paul Roub

@PaulRoub ma réponse a une différence avec une autre.
mghhgm

En quoi cette réponse est-elle différente de ceci ou cela ?
Paul Roub

@PaulRoub J'ai ce problème et recherchez d'abord sur Google pour cela. Que les pages, parlent de ce problème mais pas simple. Lorsque je trouve la meilleure réponse, j'ai décidé de partager ceci sur les pages dont parlent pour aider les utilisateurs lors de la recherche, voir ma réponse sur certaines pages de stackoverflow similaires.
mghhgm

1
cette réponse n'est pas du tout liée à la question
Zoltán Süle

-4

Essaye ça:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

9
Cela mélange jquery avec vanilla javascript d'une manière inconfortable, et comprend un casting vraiment étrange qui confond simplement les choses
moopet
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.