Константы event.keyCode

При тестировании JavaScript в Firefox 3.5 у меня есть доступ к таким константам, как KeyEvent.DOM_VK_D, но не в Google Chrome.

Есть ли кроссбраузерный способ доступа к этим константам?


javascript dom-events cross-browser
person Liam    schedule 23.09.2009    source источник
comment
Этот ответ на аналогичный вопрос указывает на отличную библиотеку, которая решает эту проблему: stackoverflow.com/questions/302122/   -  person Daniel Ribeiro    schedule 27.08.2010

Ответы (4)


arrow_upward
52
arrow_downward

Вы можете определить объект KeyEvent, если он не существует:

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
    };
}

См. Также KeyEvent в DOM уровня 3.

person Gumbo    schedule 23.09.2009
comment
Ожидается ли, что константы в Firefox KeyEvent станут стандартными в будущем? - person Liam; 23.09.2009
comment
Выдает ReferenceError, если KeyEvent не существует. Вместо этого используйте typeof. - person kangax; 23.09.2009
comment
@ Лиам Конечно. Если KeyEvent не объявлен, будет выброшена ошибка ReferenceError. Проверка с typeof позволяет избежать этого - if (typeof KeyEvent == 'undefined') - person kangax; 23.09.2009
comment
Я нашел это полезным, но насколько актуальна ссылка KeyEvent в DOM Level 3? Согласен, я не смог найти другого окончательного списка, но он не соответствует тому, что является точным (в нем указано, что ENTER - это 0x0c, 12, что не является тем, что в настоящее время сообщают браузеры). Хоть заметку добавить? - person mlhDev; 08.12.2014

arrow_upward
14
arrow_downward

Процесс стандартизации ввода с клавиатуры в веб-браузерах продолжается только последние 15 лет или около того. Оказывается, это не простая проблема.

В 2010 интерфейс KeyEvent был заменен на KeyboardEvent от W3C в рабочем проекте. Список кодов клавиш DOM_VK_ не подвергался дальнейшей стандартизации и вряд ли когда-либо будет согласован: некоторые коды клавиш различаются между платформами и даже между браузерами на одной платформе. Интерфейс KeyboardEvent - это попытка внести некоторую согласованность в ключевые события.

Однако на момент написания этого комментария можно было описать совместимость браузера для KeyboardEvent как зону бедствия. Некоторые браузеры поддерживают KeyboardEvent.key, но мы надеемся, что это поможет станут более доступными в будущем. Это строка, описывающая ключ, а не числовое значение. Список предлагаемых значений представляет собой рабочий проект W3C.

Я нашел одну прокладку для KeyboardEvent.key, но она явно в настоящее время не в актуальном состоянии со спецификацией.

Еще не исключено, что у этой истории будет счастливый конец.

person Marc Durdin    schedule 22.11.2015

arrow_upward
12
arrow_downward

Также вы можете использовать легкий пакет npm keycode-js. Он содержит список всех этих констант кода клавиш и прост в использовании.

Вот как вы его используете: 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>

Вот список поддерживаемых констант. Этот список основан на официальном списке кодов ключевых событий, перечисленных в MDN.

Этот пакет представляет собой не что иное, как список таких кодов клавиш:

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;
person kabirbaidhya    schedule 05.04.2016

arrow_upward
2
arrow_downward

Я уже довольно давно пользуюсь решением от @Gumbo. Поскольку у меня есть несколько проектов, которым нужен этот объект, я просто создал для него пакет bower. Если кто-то уже сделал это, дайте мне знать ...

Просто bower install keyevent -S и включите bower_components/src/keyevent.js в процесс сборки.

Примечание: эта библиотека тупая, если экземпляр KeyEvent уже существует, это, скорее всего, испортит его.

Репозиторий GitHub: https://github.com/cybertoothca/keyevent

bower info keyevent, чтобы получить информацию о проекте.

person Dan    schedule 17.09.2015