it-swarm.com.de

Senden eines Formulars auf "Enter" mit jQuery?

Ich habe ein Standard-Anmeldeformular - ein E-Mail-Textfeld, ein Kennwortfeld und eine Senden-Schaltfläche in einem AIR-Projekt, das HTML/jQuery verwendet. Wenn ich im Formular die Eingabetaste drücke, verschwindet der gesamte Inhalt des Formulars, das Formular wird jedoch nicht gesendet. Weiß jemand, ob es sich um ein Webkit-Problem handelt (Adobe AIR verwendet Webkit für HTML) oder ob ich Probleme 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 abgeschickt. Mit dem Formular ist keine Aktion verbunden - könnte dies das Problem sein? Kann ich eine Javascript-Funktion in die Aktion einbinden?

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

HINWEIS: Sie haben die Antwort von bendewey akzeptiert, die Beschreibung von e.preventDefault () ist jedoch falsch. Schauen Sie sich diese Stackoverflow-Antwort an: event.preventDefault () vs. return false

Im Wesentlichen ist "return false" dasselbe wie der Aufruf von e.preventDefault und e.stopPropagation().

380
NoBrainer

Darüber hinaus falsch, wie Jason Cohen erwähnt. Möglicherweise müssen Sie auch Standard verhindern

e.preventDefault();
172
bendewey

Ich weiß nicht, ob es helfen wird, 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 es funktioniert gut:

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

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

78
karim79

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

61
Jason Cohen

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

Könntest du nicht einfach eine hinzufügen?

<input type="submit" /> 

zu deinem Formular und muss es natürlich eingereicht werden, wenn Enter gedrückt wird? Sie können auch die Aktion onsubmit des Formulars einbinden und von dort aus eine Validierungsfunktion aufrufen, wenn Sie möchten ...

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

29
Zack The Human

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 eine mit dieser Art von Funktionalität dekorieren möchten, ist dies so einfach:

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

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

Verbinden Sie dann (.bind oder .live) das Ereignis submit des Formulars mit einer 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

12
GERV

Das ist mein Code:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
5
Hoàng Vũ Tgtt

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) ...
4
Logan Serman

Einfach hinzufügen, um die Implementierung zu vereinfachen. Sie können einfach ein Formular erstellen und dann die Senden-Schaltfläche ausblenden:

Zum Beispiel:

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

Ich benutze jetzt

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

Zuerst habe ich der Submit-Schaltfläche einen Eventhandler hinzugefügt, der einen Fehler für mich verursacht hat.

2
faebser

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 das Drücken/Loslassen des Keydown- und Keyup-Registercodes '13'. Gemäß jQuery-Dokumentation zur 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

0
Piemol

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