Soumettre un formulaire sur "Enter" avec jQuery?

j'ai un formulaire d'ouverture de session standard-un champ texte de courriel, un champ Mot de passe et un bouton Soumettre sur un projet aérien qui utilise HTML/jQuery. Quand J'appuie sur Entrée sur le formulaire, le contenu du formulaire entier disparaît, mais le formulaire n'est pas soumis. Est-ce que quelqu'un sait s'il s'agit d'un problème de Webkit (Adobe AIR utilise Webkit pour HTML), ou si j'ai bungé les choses?

j'ai essayé:

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

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

398
demandé sur default locale 2009-03-31 01:16:19

14 réponses

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

NOTE: Vous avez accepté la réponse de bendewey, mais il est incorrect avec sa description de E. preventDefault (). Regardez cette réponse stackoverflow: de l'événement.preventDefault () vs. return false

essentiellement," return false "est la même chose que d'appeler e.preventDefault et e.stopPropagation() .

339
répondu NoBrainer 2017-05-23 12:34:31

en plus de rendre false comme Jason Cohen l'a mentionné. Vous devrez peut-être aussi prévenir les erreurs

e.preventDefault();
173
répondu bendewey 2009-03-30 21:23:25

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

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

Note: jQuery ('#submit').focus () fait animer le bouton quand enter est pressé.

76
répondu karim79 2009-03-30 21:30:58

Retour false pour empêcher la frappe de continuer.

61
répondu Jason Cohen 2009-03-30 21:17:51

y a-t-il une raison pour laquelle vous devez faire un crochet et un test pour la touche Entrée?

vous ne pouvez pas simplement ajouter un

<input type="submit" /> 

à votre formulaire et a-t-il naturellement été soumis lorsque l'entrée est poussée? Vous pouvez même alors accrocher l'action onsubmit du formulaire et appeler une fonction de validation de là si vous le souhaitez...

Vous pourriez même utiliser le onsubmit comme un test pour voir si votre formulaire est soumis, mais il ne fonctionne pas si vous appelez form.submit() .

28
répondu Zack The Human 2009-03-30 21:24:20

Voici une façon de faire ceci comme un plugin JQuery (au cas où vous voulez 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 avec ce type de fonctionnalité, il est aussi simple que cela:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );
13
répondu bvaughn 2013-10-16 16:39:51

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

puis hook ( .bind ou .live ) l'événement submit du formulaire à n'importe quelle fonction avec jQuery dans le fichier javascript.

voici un exemple de code pour 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 de 2011-04-13, avec Firefox 4.0 et jQuery 1.4.3

12
répondu GERV 2011-04-13 18:47:30

aussi pour maintenir l'accessibilité, vous devriez utiliser ceci pour déterminer votre code:

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

if (c == 13) ...
4
répondu Logan Serman 2009-03-30 21:44:51

C'est mon code:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
4
répondu Hoàng Vũ Tgtt 2014-07-13 14:00:07

ajoute juste pour une mise en œuvre facile. Vous pouvez tout simplement faire un formulaire et ensuite faire le bouton soumettre caché:

par exemple:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>
2
répondu Joem Maranan 2013-07-25 05:32:28

j'utilise maintenant

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

au début j'ai ajouté un eventhandler au bouton Soumettre qui a produit une erreur pour moi.

2
répondu faebser 2013-09-08 21:12:34

en HTML codes:

<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
répondu mghhgm 2017-09-29 13:56:20

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

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 en tapant "a Enter 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 que le 'keypress' est manquant, mais le keydown et le code de registre '13' sont pressés/libérés. Selon jQuery documentation sur la fonction keypress () :

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 le serveur 2012 R2

0
répondu Piemol 2018-08-24 10:32:33

essayez ceci:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}
-4
répondu nigitza 2018-04-11 09:55:17