Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

event.keyCode constants

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?

like image 702
Liam Avatar asked Sep 23 '09 11:09

Liam


People also ask

What is e KeyCode === 13?

key 13 keycode is for ENTER key.

Why is event KeyCode deprecated?

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 .

What is event KeyCode in JavaScript?

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.


3 Answers

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.

like image 178
Gumbo Avatar answered Oct 17 '22 16:10

Gumbo


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.

like image 30
Marc Durdin Avatar answered Oct 17 '22 16:10

Marc Durdin


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;
like image 13
kabirbaidhya Avatar answered Oct 17 '22 16:10

kabirbaidhya