jQuery Event Keypress: Welche Taste wurde gedrückt?

Question

Mit jQuery, wie finde ich heraus, welche Taste gedrückt wurde, wenn ich an das keypress-Ereignis binden?

$('#searchbox input').bind('keypress', function(e) {});

Ich möchte eine Übermittlung auslösen, wenn ENTER gedrückt wird.

[Update]

Auch wenn ich die (oder besser: eine) Antwort selbst gefunden habe, scheint es einen gewissen Spielraum für Variationen zu geben ;)

Gibt es einen Unterschied zwischen keyCode y which - vor allem, wenn ich nur auf der Suche nach ENTER der niemals ein Unicode-Schlüssel sein wird?

Bieten einige Browser die eine Eigenschaft und andere die andere?

Answer 1

Hier eine ausführliche Beschreibung des Verhaltens der verschiedenen Browser http://unixpapa.com/js/key.html

Answer 2

Verwenden Sie event.key und modernes JS!

Keine Nummerncodes mehr. Sie können den Schlüssel direkt überprüfen. Zum Beispiel "Enter" , "LeftArrow" , "r" o "R" .

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozilla-Dokumente

Unterstützte Browser

Answer 3

Okay, ich war blind:

e.which

enthält den ASCII-Code des Schlüssels.

Siehe https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Answer 4

Ich ergänze den Lösungscode einfach um diese Zeile e.preventDefault(); . Im Falle des Eingabefeldes eines Formulars ist es nicht erforderlich, die Eingabe zu bestätigen, wenn die Taste Enter gedrückt wird.

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }

Answer 5

Hexe ;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

Demo : http://jsfiddle.net/molokoloco/hgXyq/24/