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

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?

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

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

e.preventDefault();

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.

Revenez falsepour empêcher la frappe de continuer.

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

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
    } );

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

Voici mon code:

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

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

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>

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.

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

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
        }
    });
}

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();
        }
    })
}