JavaScript event.keyCode Konstanten

Question

Beim Testen von JavaScript in Firefox 3.5 habe ich Zugriff auf Konstanten wie KeyEvent.DOM_VK_D, aber nicht in Google Chrome. Gibt es einen browserübergreifenden Zugriff auf diese Konstanten?

Answer 1

können Sie die KeyEvent object definieren, wenn sie noch nicht existiert:

if (typeof KeyEvent == "undefined") { 
    var KeyEvent = { 
     DOM_VK_CANCEL: 3, 
     DOM_VK_HELP: 6, 
     DOM_VK_BACK_SPACE: 8, 
     DOM_VK_TAB: 9, 
     DOM_VK_CLEAR: 12, 
     DOM_VK_RETURN: 13, 
     DOM_VK_ENTER: 14, 
     DOM_VK_SHIFT: 16, 
     DOM_VK_CONTROL: 17, 
     DOM_VK_ALT: 18, 
     DOM_VK_PAUSE: 19, 
     DOM_VK_CAPS_LOCK: 20, 
     DOM_VK_ESCAPE: 27, 
     DOM_VK_SPACE: 32, 
     DOM_VK_PAGE_UP: 33, 
     DOM_VK_PAGE_DOWN: 34, 
     DOM_VK_END: 35, 
     DOM_VK_HOME: 36, 
     DOM_VK_LEFT: 37, 
     DOM_VK_UP: 38, 
     DOM_VK_RIGHT: 39, 
     DOM_VK_DOWN: 40, 
     DOM_VK_PRINTSCREEN: 44, 
     DOM_VK_INSERT: 45, 
     DOM_VK_DELETE: 46, 
     DOM_VK_0: 48, 
     DOM_VK_1: 49, 
     DOM_VK_2: 50, 
     DOM_VK_3: 51, 
     DOM_VK_4: 52, 
     DOM_VK_5: 53, 
     DOM_VK_6: 54, 
     DOM_VK_7: 55, 
     DOM_VK_8: 56, 
     DOM_VK_9: 57, 
     DOM_VK_SEMICOLON: 59, 
     DOM_VK_EQUALS: 61, 
     DOM_VK_A: 65, 
     DOM_VK_B: 66, 
     DOM_VK_C: 67, 
     DOM_VK_D: 68, 
     DOM_VK_E: 69, 
     DOM_VK_F: 70, 
     DOM_VK_G: 71, 
     DOM_VK_H: 72, 
     DOM_VK_I: 73, 
     DOM_VK_J: 74, 
     DOM_VK_K: 75, 
     DOM_VK_L: 76, 
     DOM_VK_M: 77, 
     DOM_VK_N: 78, 
     DOM_VK_O: 79, 
     DOM_VK_P: 80, 
     DOM_VK_Q: 81, 
     DOM_VK_R: 82, 
     DOM_VK_S: 83, 
     DOM_VK_T: 84, 
     DOM_VK_U: 85, 
     DOM_VK_V: 86, 
     DOM_VK_W: 87, 
     DOM_VK_X: 88, 
     DOM_VK_Y: 89, 
     DOM_VK_Z: 90, 
     DOM_VK_CONTEXT_MENU: 93, 
     DOM_VK_NUMPAD0: 96, 
     DOM_VK_NUMPAD1: 97, 
     DOM_VK_NUMPAD2: 98, 
     DOM_VK_NUMPAD3: 99, 
     DOM_VK_NUMPAD4: 100, 
     DOM_VK_NUMPAD5: 101, 
     DOM_VK_NUMPAD6: 102, 
     DOM_VK_NUMPAD7: 103, 
     DOM_VK_NUMPAD8: 104, 
     DOM_VK_NUMPAD9: 105, 
     DOM_VK_MULTIPLY: 106, 
     DOM_VK_ADD: 107, 
     DOM_VK_SEPARATOR: 108, 
     DOM_VK_SUBTRACT: 109, 
     DOM_VK_DECIMAL: 110, 
     DOM_VK_DIVIDE: 111, 
     DOM_VK_F1: 112, 
     DOM_VK_F2: 113, 
     DOM_VK_F3: 114, 
     DOM_VK_F4: 115, 
     DOM_VK_F5: 116, 
     DOM_VK_F6: 117, 
     DOM_VK_F7: 118, 
     DOM_VK_F8: 119, 
     DOM_VK_F9: 120, 
     DOM_VK_F10: 121, 
     DOM_VK_F11: 122, 
     DOM_VK_F12: 123, 
     DOM_VK_F13: 124, 
     DOM_VK_F14: 125, 
     DOM_VK_F15: 126, 
     DOM_VK_F16: 127, 
     DOM_VK_F17: 128, 
     DOM_VK_F18: 129, 
     DOM_VK_F19: 130, 
     DOM_VK_F20: 131, 
     DOM_VK_F21: 132, 
     DOM_VK_F22: 133, 
     DOM_VK_F23: 134, 
     DOM_VK_F24: 135, 
     DOM_VK_NUM_LOCK: 144, 
     DOM_VK_SCROLL_LOCK: 145, 
     DOM_VK_COMMA: 188, 
     DOM_VK_PERIOD: 190, 
     DOM_VK_SLASH: 191, 
     DOM_VK_BACK_QUOTE: 192, 
     DOM_VK_OPEN_BRACKET: 219, 
     DOM_VK_BACK_SLASH: 220, 
     DOM_VK_CLOSE_BRACKET: 221, 
     DOM_VK_QUOTE: 222, 
     DOM_VK_META: 224 
    }; 
} 

Siehe auch KeyEvent in DOM Level 3.

Answer 2

Ich habe die Lösung von @Gumbo schon seit einiger Zeit benutzt. Da ich mehrere Projekte habe, die dieses Objekt benötigen, habe ich einfach ein Bower-Paket dafür erstellt. Wenn jemand dies bereits getan hat, lass es mich wissen ...

Einfach bower install keyevent -S und die bower_components/src/keyevent.js in Ihrem Build-Prozess enthalten.

Hinweis: Diese Bibliothek ist dumm, wenn die KeyEvent-Instanz bereits vorhanden ist, wird dies wahrscheinlich überstürzen.

GitHub Repo: https://github.com/cybertoothca/keyevent

bower info keyevent Informationen über das Projekt zu erhalten.

Answer 3

Der Standardisierungsprozess für die Tastatureingabe in Webbrowsern wurde erst in den letzten 15 Jahren durchgeführt. Es stellt sich heraus, dass es kein einfaches Problem ist.

In 2010 wurde die KeyEvent-Schnittstelle durch KeyboardEvent von W3C in einem Arbeitsentwurf ersetzt. Die Liste der DOM_VK_-Schlüsselcodes hat keine weitere Standardisierungsarbeit erfahren und wird wahrscheinlich nie konsistent gemacht werden: Einige der Schlüsselcodes unterscheiden sich zwischen Plattformen und sogar zwischen Browsern auf derselben Plattform. Die KeyboardEvent-Schnittstelle ist ein Versuch, Konsistenz für Schlüsselereignisse zu bringen.

Zum Zeitpunkt des Schreibens dieses Kommentars, browser compatibility for KeyboardEvent could be described as a disaster zone. Nur wenige Browser unterstützen KeyboardEvent.key, aber dies wird hoffentlich in Zukunft konsistent verfügbar sein. Es ist eine Zeichenfolge, die den Schlüssel beschreibt, anstatt einen numerischen Wert. Die Liste der vorgeschlagenen Werte ist eine W3C Working Draft.

Ich fand eine shim for KeyboardEvent.key, aber es ist anscheinend nicht aktuell mit der Spezifikation aktuell.

Es ist immer noch möglich, dass diese Geschichte ein Happy End hat.

Answer 4

Sie können auch ein leichtes npm-Paket keycode-js verwenden. Dies enthält eine Liste aller dieser Schlüsselcode-Konstanten und ist einfach zu verwenden.

Hier ist, wie Sie es verwenden, https://github.com/kabirbaidhya/keycode-js#usage

window.addEventListener('keyup', function(e) { 
    if (e.keyCode === KeyCode.KEY_RETURN) { 
     console.log('It was the Return key.'); 
    } else { 
     console.log('It was any other key.'); 
    } 
}); 

Hier die Liste von supported constants ist.

Dieses Paket ist nichts anderes als eine Liste von Tastencodes wie folgt aus:

KeyCode.KEY_CANCEL = 3; 
KeyCode.KEY_HELP = 6; 
KeyCode.KEY_BACK_SPACE = 8; 
KeyCode.KEY_TAB = 9; 
KeyCode.KEY_CLEAR = 12; 
KeyCode.KEY_RETURN = 13; 
KeyCode.KEY_ENTER = 14; 
KeyCode.KEY_SHIFT = 16; 
KeyCode.KEY_CONTROL = 17; 
KeyCode.KEY_ALT = 18; 
KeyCode.KEY_PAUSE = 19; 
KeyCode.KEY_CAPS_LOCK = 20; 
KeyCode.KEY_ESCAPE = 27; 
KeyCode.KEY_SPACE = 32; 
KeyCode.KEY_PAGE_UP = 33; 
KeyCode.KEY_PAGE_DOWN = 34; 
KeyCode.KEY_END = 35; 
KeyCode.KEY_HOME = 36; 
KeyCode.KEY_LEFT = 37; 
KeyCode.KEY_UP = 38; 
KeyCode.KEY_RIGHT = 39; 
KeyCode.KEY_DOWN = 40; 
KeyCode.KEY_PRINTSCREEN = 44; 
KeyCode.KEY_INSERT = 45; 
KeyCode.KEY_DELETE = 46; 
KeyCode.KEY_0 = 48; 
KeyCode.KEY_1 = 49; 
KeyCode.KEY_2 = 50; 
KeyCode.KEY_3 = 51; 
KeyCode.KEY_4 = 52; 
KeyCode.KEY_5 = 53; 
KeyCode.KEY_6 = 54; 
KeyCode.KEY_7 = 55; 
KeyCode.KEY_8 = 56; 
KeyCode.KEY_9 = 57; 
KeyCode.KEY_SEMICOLON = 59; 
KeyCode.KEY_EQUALS = 61; 
KeyCode.KEY_A = 65; 
KeyCode.KEY_B = 66; 
KeyCode.KEY_C = 67; 
KeyCode.KEY_D = 68; 
KeyCode.KEY_E = 69; 
KeyCode.KEY_F = 70; 
KeyCode.KEY_G = 71; 
KeyCode.KEY_H = 72; 
KeyCode.KEY_I = 73; 
KeyCode.KEY_J = 74; 
KeyCode.KEY_K = 75; 
KeyCode.KEY_L = 76; 
KeyCode.KEY_M = 77; 
KeyCode.KEY_N = 78; 
KeyCode.KEY_O = 79; 
KeyCode.KEY_P = 80; 
KeyCode.KEY_Q = 81; 
KeyCode.KEY_R = 82; 
KeyCode.KEY_S = 83; 
KeyCode.KEY_T = 84; 
KeyCode.KEY_U = 85; 
KeyCode.KEY_V = 86; 
KeyCode.KEY_W = 87; 
KeyCode.KEY_X = 88; 
KeyCode.KEY_Y = 89; 
KeyCode.KEY_Z = 90; 
KeyCode.KEY_CONTEXT_MENU = 93; 
KeyCode.KEY_NUMPAD0 = 96; 
KeyCode.KEY_NUMPAD1 = 97; 
KeyCode.KEY_NUMPAD2 = 98; 
KeyCode.KEY_NUMPAD3 = 99; 
KeyCode.KEY_NUMPAD4 = 100; 
KeyCode.KEY_NUMPAD5 = 101; 
KeyCode.KEY_NUMPAD6 = 102; 
KeyCode.KEY_NUMPAD7 = 103; 
KeyCode.KEY_NUMPAD8 = 104; 
KeyCode.KEY_NUMPAD9 = 105; 
KeyCode.KEY_MULTIPLY = 106; 
KeyCode.KEY_ADD = 107; 
KeyCode.KEY_SEPARATOR = 108; 
KeyCode.KEY_SUBTRACT = 109; 
KeyCode.KEY_DECIMAL = 110; 
KeyCode.KEY_DIVIDE = 111; 
KeyCode.KEY_F1 = 112; 
KeyCode.KEY_F2 = 113; 
KeyCode.KEY_F3 = 114; 
KeyCode.KEY_F4 = 115; 
KeyCode.KEY_F5 = 116; 
KeyCode.KEY_F6 = 117; 
KeyCode.KEY_F7 = 118; 
KeyCode.KEY_F8 = 119; 
KeyCode.KEY_F9 = 120; 
KeyCode.KEY_F10 = 121; 
KeyCode.KEY_F11 = 122; 
KeyCode.KEY_F12 = 123; 
KeyCode.KEY_F13 = 124; 
KeyCode.KEY_F14 = 125; 
KeyCode.KEY_F15 = 126; 
KeyCode.KEY_F16 = 127; 
KeyCode.KEY_F17 = 128; 
KeyCode.KEY_F18 = 129; 
KeyCode.KEY_F19 = 130; 
KeyCode.KEY_F20 = 131; 
KeyCode.KEY_F21 = 132; 
KeyCode.KEY_F22 = 133; 
KeyCode.KEY_F23 = 134; 
KeyCode.KEY_F24 = 135; 
KeyCode.KEY_NUM_LOCK = 144; 
KeyCode.KEY_SCROLL_LOCK = 145; 
KeyCode.KEY_COMMA = 188; 
KeyCode.KEY_PERIOD = 190; 
KeyCode.KEY_SLASH = 191; 
KeyCode.KEY_BACK_QUOTE = 192; 
KeyCode.KEY_OPEN_BRACKET = 219; 
KeyCode.KEY_BACK_SLASH = 220; 
KeyCode.KEY_CLOSE_BRACKET = 221; 
KeyCode.KEY_QUOTE = 222; 
KeyCode.KEY_META = 224;