Senden eines Formulars auf 'Enter' mit jQuery?

427

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?

hollenbeck sein
quelle
3
Haben Sie wirklich ein class = "input" -Attribut für Ihre <input ...? Scheint, als sollte es $ ('Eingabe') sein. Tastendruck ...
NexusRex
Die Klassen werden programmgesteuert von einem CMS generiert. Davon abgesehen würde sich ein Scoping auf $ ('Eingabe') auf jede Eingabe auf der Seite auswirken, unabhängig davon, ob ich das Verhalten wollte oder nicht. Tut mir leid, dass es deine Sensibilität verletzt.
Hollenbeck
15
Sensibilitäten nicht im geringsten beleidigt. Ich dachte nur, es könnte ein Versehen gewesen sein, das zu dem Problem geführt hat. Mach weiter.
NexusRex
1
Zu Ihrer Information: Ihre akzeptierte Antwort ist nicht ganz richtig. Siehe meine Antwort unten.
NoBrainer

Antworten:

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

Klacks
quelle
3
Beachten Sie, dass sie nicht gleich sind. IE8 hat kein e.preventDefault. Verwenden Sie für IE8 event.returnValue = false;
mbokil
8
@mbokil Abgesehen davon, dass es bei Verwendung von jQuery in IE8 dasselbe ist. und IE7. Und IE6.
Kevin B
Wenn Sie zuerst in die Eingabefelder eingeben möchten, geben Sie "return false" ein. innerhalb der if-Anweisung.
Juni Brosas
173

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

e.preventDefault();
Bendewey
quelle
13
Wie @NoBrainer sagte, ist dies falsch: return falseIn einem von jQuery verwalteten Ereignis rufen Sie automatisch e.preventDefault ()
Riccardo Galli auf
83

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.

karim79
quelle
2
Funktioniert super, aber ich musste "return false" hinzufügen. um die Übermittlung von Doppelformularen zu verhindern.
Code90
Arbeiten | Sehen Sie eine Menge solcher Ergebnisse, die über Trigger, Sendkey usw., doh, bla ... sprechen, aber das ist das einzige, was für mich funktioniert, und senden Sie wirklich einen Klick auf eine Schaltfläche. Nicht einreichen (). Der Trick war also, dass focus (). Click () Funktionen nacheinander ausführen. VIELEN DANK.
m3nda
Funktioniert, aber ich musste diesen Code unter setzen: $ (document) .ready (function () {...
shasi kanth
61

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

Jason Cohen
quelle
30

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

Zack der Mensch
quelle
1
Stimme voll und ganz zu. Meine Präferenz wäre immer, die native Funktionalität des Browsers zu verwenden (Eingaben vom Typ = Senden nativ auf einen Tastendruck reagieren), anstatt weitere kludged up-Skripte hinzuzufügen.
Aaron
1
Das Problem ist, was ist, wenn Sie Ajax-Sachen machen und es kein tatsächliches Postback auf dem Server gibt, aber Sie möchten, dass sich die Benutzeroberfläche so verhält, wie es der Benutzer erwartet?
Devlord
In der Tat ... ich hatte das Ganze übersehen return false;.
Devlord
14

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
    } );
bvaughn
quelle
12

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

GERV
quelle
In Chrome funktioniert das nicht. Wird trotzdem einreichen.
Marcelo Agimóvel
5

Das ist mein Code:

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

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

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>
Joem Maranan
quelle
@cebirci und welche Version ist dein Chrom? Ich habe von Laptops auf PC getestet und mein Code funktioniert einfach. Versuchen Sie, das neueste Chrom herunterzuladen, bevor Sie meine Antwort notieren.
Joem Maranan
2

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.

faebser
quelle
1

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

Piemol
quelle
0

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
        }
    });
}
mghhgm
quelle
1
Bitte posten Sie keine identischen Antworten auf mehrere Fragen. Schreiben Sie eine gute Antwort und stimmen Sie ab, um die anderen Fragen als Duplikate zu schließen. Wenn die Frage kein Duplikat ist, passen Sie Ihre Antworten auf die Frage an.
Paul Roub
@PaulRoub meine Antwort hat einen Unterschied zu einer anderen.
mghhgm
Wie unterscheidet sich diese Antwort von dieser oder jener ?
Paul Roub
@PaulRoub Ich habe dieses Problem und suche zuerst bei Google danach. Diese Seiten sprechen über dieses Problem, aber nicht einfach. Wenn ich die beste Antwort gefunden habe, habe ich beschlossen, diese auf den Seiten zu teilen, über die gesprochen wird, um Benutzern bei der Suche zu helfen. Meine Antwort finden Sie auf einigen ähnlichen Stackoverflow-Seiten.
mghhgm
1
Diese Antwort hat überhaupt nichts mit der Frage zu
tun
-4

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();
        }
    })
}
Nigitza
quelle
9
Dies ist das Mischen von jquery mit Vanille-Javascript auf unangenehme Weise und beinhaltet eine wirklich seltsame Besetzung, die die Dinge nur verwirrt
moopet