Senden eines Formulars auf 'Enter' mit jQuery?

Ich habe ein Standard-Anmeldeformular - ein E-Mail-Textfeld, ein Kennwortfeld und eine Senden-Schaltfläche für ein AIR-Projekt, das HTML / jQuery verwendet. Wenn ich im Formular die Eingabetaste drücke, verschwindet der gesamte Inhalt des Formulars, aber das Formular wird nicht gesendet. Weiß jemand, ob dies ein Webkit-Problem ist (Adobe AIR verwendet Webkit für HTML) oder ob ich etwas durcheinander gebracht habe?

Ich habe es versucht:

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

Aber das hat weder das Clearing-Verhalten gestoppt noch das Formular gesendet. Mit dem Formular ist keine Aktion verbunden - könnte das das Problem sein? Kann ich eine Javascript-Funktion in die Aktion einfügen?

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

Schauen Sie sich diese Stackoverflow-Antwort an: event.preventDefault () vs. return false

Im Wesentlichen ist "return false" dasselbe wie das Aufrufen von e.preventDefaultund e.stopPropagation().

Neben der Rückgabe falsch, wie Jason Cohen erwähnt. Möglicherweise müssen Sie auch Default verhindern

e.preventDefault();

Sie wissen nicht, ob dies hilfreich ist, aber Sie können versuchen, einen Klick auf die Schaltfläche "Senden" zu simulieren, anstatt das Formular direkt zu senden. Ich habe den folgenden Code in der Produktion und er funktioniert einwandfrei:

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

Hinweis: jQuery ('# submit'). Focus () wird die Schaltfläche animiert, wenn die Eingabetaste gedrückt wird.

Kehren Sie zurück false, um zu verhindern, dass der Tastendruck fortgesetzt wird.

Gibt es einen Grund, warum Sie die Eingabetaste einhaken und testen müssen?

Könnten Sie nicht einfach eine hinzufügen?

<input type="submit" /> 

auf Ihr Formular und muss es natürlich gesendet werden, wenn die Eingabe gedrückt wird? Sie können sogar dann die onsubmitAktion des Formulars verknüpfen und von dort aus eine Validierungsfunktion aufrufen, wenn Sie möchten ...

Sie können das sogar onsubmitals Test verwenden, um festzustellen, ob Ihr Formular gesendet wird, aber es funktioniert nicht, wenn Sie anrufen form.submit().

Hier ist eine Möglichkeit, dies als JQuery-Plugin zu tun (falls Sie die Funktionalität wiederverwenden möchten):

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

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

Wenn Sie nun ein <input>Element mit dieser Art von Funktionalität dekorieren möchten, ist dies so einfach:

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

Sie können onsubmit="return false"den Formularcode auf der Seite auch einfach hinzufügen , um das Standardverhalten zu verhindern.

Verknüpfen ( .bindoder .live) das submitEreignis des Formulars mit einer beliebigen Funktion mit jQuery in der Javascript-Datei.

Hier ist ein Beispielcode, um zu helfen:

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

Dies funktioniert ab dem 13.04.2011 mit Firefox 4.0 und jQuery 1.4.3

Das ist mein Code:

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

Um die Zugänglichkeit zu gewährleisten, sollten Sie dies auch verwenden, um Ihren Schlüsselcode zu bestimmen:

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

if (c == 13) ...

Einfach hinzufügen für eine einfache Implementierung. Sie können einfach ein Formular erstellen und dann die Schaltfläche "Senden" ausblenden:

Zum Beispiel:

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

Ich benutze jetzt

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

Zuerst habe ich dem Submit-Button einen Eventhandler hinzugefügt, der einen Fehler für mich verursacht hat.

Ich habe heute herausgefunden, dass das Tastendruckereignis nicht ausgelöst wird, wenn die Eingabetaste gedrückt wird. Vielleicht möchten Sie stattdessen zu keydown () oder keyup () wechseln.

Mein Testskript:

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

Die Ausgabe in der Konsole bei Eingabe von "A Enter B" auf der Tastatur:

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

keydown (13)
enter
keyup (13)
enter

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

Sie sehen in der zweiten Sequenz, dass der 'Tastendruck' fehlt, aber der Keydown- und Keyup-Registercode '13' gedrückt / losgelassen wird. Wie pro jQuery Dokumentation über die Funktion 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.

Getestet auf IE11 und FF61 auf Server 2012 R2

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

In Js-Codes:

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

Versuche dies:

var form = document.formname;

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