Formularübermittlung beim Drücken der Eingabetaste verhindern

Question

を持っています。 form mit zwei Textfeldern, einem Wählen Sie Dropdown und eine Optionsschaltfläche . Wenn die enter Taste gedrückt wird, möchte ich meine JavaScript-Funktion aufrufen, aber wenn ich sie drücke, wird die form vorgelegt wird.

Wie kann ich die form von der Übermittlung, wenn die <strong>enter</strong> Taste gedrückt wird?

Answer 1

if(characterCode == 13) {
    // returning false will prevent the event from bubbling up.
    return false; 
} else{
    return true;
}

Stellen Sie sich vor, Sie haben das folgende Textfeld in einem Formular:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

Um ein "benutzerdefiniertes" Skript in diesem Textfeld auszuführen, wenn die Eingabetaste gedrückt wird, und das Formular nicht abzuschicken, gibt es folgendes Muster Code. Bitte beachten Sie, dass diese Funktion keine Fehlerprüfung durchführt und höchstwahrscheinlich nur im IE funktionieren wird. Um dies richtig zu tun, benötigen Sie eine robustere Lösung, aber Sie werden die allgemeine Idee bekommen.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

Wenn der Wert der Funktion zurückgegeben wird, wird der Ereignishandler gewarnt, das Ereignis nicht weiter zu behandeln, und verhindert, dass das Tastendruckereignis weiter behandelt wird.

NOTE :

Es wurde darauf hingewiesen, dass keyCode es jetzt veraltet . Die nächstbeste Alternative which hat wurde ebenfalls veraltet .

Leider ist der bevorzugte Standard key die von modernen Browsern weitgehend unterstützt wird, hat einige Fragwürdiges Verhalten in IE und Edge . Alles, was älter als IE11 ist, benötigt immer noch eine Polyfill .

Darüber hinaus ist die veraltete Warnung zwar recht bedrohlich in Bezug auf keyCode y which Die Abschaffung dieser Systeme würde einen massiven Einschnitt für unzählige ältere Websites bedeuten. Aus diesem Grund, ist es unwahrscheinlich, dass sie in nächster Zeit irgendwo hingehen.

Answer 2

Beides verwenden event.which y event.keyCode :

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

Answer 3

Event.key === "Eingabe"

Neuer und viel sauberer: Verwendung event.key . Keine willkürlichen Zahlencodes mehr!

HINWEIS: Die alten Eigenschaften ( .keyCode y .which ) sind veraltet.

const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Moderner Stil, mit Lambda und Destrukturierung

node.addEventListener("keydown", ({key}) => {
    if (key === "Enter") // Handle press
})

Mozilla-Dokumente

Unterstützte Browser

Answer 4

Wenn Sie jQuery verwenden:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

Answer 5

Erkennen, ob die Eingabetaste im gesamten Dokument gedrückt wurde:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/