Menu
When testing JavaScript in Firefox 3.5, I have access to constants such as KeyEvent.DOM_VK_D, but not in Google Chrome.
Is there a cross-browser way of accessing these constants?
702
key 13 keycode is for ENTER key.
KeyCode was deprecated because in practice it was “inconsistent across platforms and even the same implementation on different operating systems or using different localizations.” The new recommendation is to use key or code .
JavaScript KeyCodeThe keydown event occurs when the keyboard key is pressed, and it is followed at once by the execution of keypress event. The keyup event is generated when the key is released.
You can define the KeyEvent object if it doesn’t exist:
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
};
}
See also KeyEvent in DOM Level 3.
178
The standardisation process for keyboard input in web browsers has been ongoing for only the last 15 years or so. It turns out that it's not a simple problem.
In 2010 the KeyEvent interface was replaced with KeyboardEvent by W3C in a working draft. The list of DOM_VK_ key codes has not seen further standardisation work and is unlikely to ever be made consistent: some of the key codes differ between platforms, and even between browsers on the same platform. The KeyboardEvent interface is an attempt to bring in some consistency for key events.
However, as of writing this comment, browser compatibility for KeyboardEvent could be described as a disaster zone. Few browsers support KeyboardEvent.key, but this will hopefully become more consistently available in the future. It is a string which describes the key, rather than a numeric value. The list of proposed values is a W3C Working Draft.
I found one shim for KeyboardEvent.key, but it is apparently not currently up to date with the specification.
It is still possible that this story will have a happy ending.
30
Also you can use a lightweight npm package keycode-js. This contains a list of all these keycode constants and is easy to use.
Here's how you use it, https://github.com/kabirbaidhya/keycode-js#usage
// You may use either the numeric code value or the code to identity the key.
console.log("Return key code:", KeyCode.KEY_RETURN);
console.log("Return key name:", KeyCode.CODE_RETURN);
console.log("Return key value:", KeyCode.VALUE_RETURN);
// Use it in the event handler
window.addEventListener('keyup', function(e) {
// You may do one of these checks.
// Check the code value.
if (e.code === KeyCode.CODE_RETURN) {
console.log('It was the Return key.');
return;
}
// OR, check the keyCode value.
if (e.keyCode === KeyCode.KEY_RETURN) {
console.log('It was the Return key.');
return;
}
// OR, check the key value.
if (e.key === KeyCode.VALUE_RETURN) {
console.log('It was the Return key.');
return;
}
console.log('It was any other key.');
});<script src="https://unpkg.com/[email protected]/dist/keycode.min.js"></script>Here's the list of supported constants. This list based on the official list of key event codes listed in MDN.
This package is nothing more than a list of key codes like this:
exports.KEY_CANCEL = 3;
exports.KEY_HELP = 6;
exports.KEY_BACK_SPACE = 8;
exports.KEY_TAB = 9;
exports.KEY_CLEAR = 12;
exports.KEY_RETURN = 13;
exports.KEY_ENTER = 14;
exports.KEY_SHIFT = 16;
exports.KEY_CONTROL = 17;
exports.KEY_ALT = 18;
exports.KEY_PAUSE = 19;
exports.KEY_CAPS_LOCK = 20;
exports.KEY_ESCAPE = 27;
exports.KEY_SPACE = 32;
exports.KEY_PAGE_UP = 33;
exports.KEY_PAGE_DOWN = 34;
exports.KEY_END = 35;
exports.KEY_HOME = 36;
exports.KEY_LEFT = 37;
exports.KEY_UP = 38;
exports.KEY_RIGHT = 39;
exports.KEY_DOWN = 40;
exports.KEY_PRINTSCREEN = 44;
exports.KEY_INSERT = 45;
exports.KEY_DELETE = 46;
exports.KEY_0 = 48;
exports.KEY_1 = 49;
exports.KEY_2 = 50;
exports.KEY_3 = 51;
exports.KEY_4 = 52;
exports.KEY_5 = 53;
exports.KEY_6 = 54;
exports.KEY_7 = 55;
exports.KEY_8 = 56;
exports.KEY_9 = 57;
exports.KEY_SEMICOLON = 59;
exports.KEY_EQUALS = 61;
exports.KEY_A = 65;
exports.KEY_B = 66;
exports.KEY_C = 67;
exports.KEY_D = 68;
exports.KEY_E = 69;
exports.KEY_F = 70;
exports.KEY_G = 71;
exports.KEY_H = 72;
exports.KEY_I = 73;
exports.KEY_J = 74;
exports.KEY_K = 75;
exports.KEY_L = 76;
exports.KEY_M = 77;
exports.KEY_N = 78;
exports.KEY_O = 79;
exports.KEY_P = 80;
exports.KEY_Q = 81;
exports.KEY_R = 82;
exports.KEY_S = 83;
exports.KEY_T = 84;
exports.KEY_U = 85;
exports.KEY_V = 86;
exports.KEY_W = 87;
exports.KEY_X = 88;
exports.KEY_Y = 89;
exports.KEY_Z = 90;
exports.KEY_CONTEXT_MENU = 93;
exports.KEY_NUMPAD0 = 96;
exports.KEY_NUMPAD1 = 97;
exports.KEY_NUMPAD2 = 98;
exports.KEY_NUMPAD3 = 99;
exports.KEY_NUMPAD4 = 100;
exports.KEY_NUMPAD5 = 101;
exports.KEY_NUMPAD6 = 102;
exports.KEY_NUMPAD7 = 103;
exports.KEY_NUMPAD8 = 104;
exports.KEY_NUMPAD9 = 105;
exports.KEY_MULTIPLY = 106;
exports.KEY_ADD = 107;
exports.KEY_SEPARATOR = 108;
exports.KEY_SUBTRACT = 109;
exports.KEY_DECIMAL = 110;
exports.KEY_DIVIDE = 111;
exports.KEY_F1 = 112;
exports.KEY_F2 = 113;
exports.KEY_F3 = 114;
exports.KEY_F4 = 115;
exports.KEY_F5 = 116;
exports.KEY_F6 = 117;
exports.KEY_F7 = 118;
exports.KEY_F8 = 119;
exports.KEY_F9 = 120;
exports.KEY_F10 = 121;
exports.KEY_F11 = 122;
exports.KEY_F12 = 123;
exports.KEY_F13 = 124;
exports.KEY_F14 = 125;
exports.KEY_F15 = 126;
exports.KEY_F16 = 127;
exports.KEY_F17 = 128;
exports.KEY_F18 = 129;
exports.KEY_F19 = 130;
exports.KEY_F20 = 131;
exports.KEY_F21 = 132;
exports.KEY_F22 = 133;
exports.KEY_F23 = 134;
exports.KEY_F24 = 135;
exports.KEY_NUM_LOCK = 144;
exports.KEY_SCROLL_LOCK = 145;
exports.KEY_COMMA = 188;
exports.KEY_PERIOD = 190;
exports.KEY_SLASH = 191;
exports.KEY_BACK_QUOTE = 192;
exports.KEY_OPEN_BRACKET = 219;
exports.KEY_BACK_SLASH = 220;
exports.KEY_CLOSE_BRACKET = 221;
exports.KEY_QUOTE = 222;
exports.KEY_META = 224;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
