bubbling - onclick javascript
Constantes de JavaScript event.keyCode (4)
El proceso de estandarización para la entrada del teclado en los navegadores web ha sido continuo durante los últimos 15 años aproximadamente. Resulta que no es un problema simple.
En 2010 la interfaz KeyEvent fue reemplazada por KeyboardEvent por W3C en un borrador de trabajo. La lista de códigos de clave DOM_VK_ no ha visto un mayor trabajo de estandarización y es poco probable que se haga coherente: algunos de los códigos de clave difieren entre plataformas e incluso entre navegadores en la misma plataforma. La interfaz KeyboardEvent es un intento de traer cierta consistencia para eventos clave.
Sin embargo, al momento de escribir este comentario, la compatibilidad del navegador para KeyboardEvent podría describirse como una zona de desastre . Pocos navegadores son compatibles con KeyboardEvent.key , pero se espera que esto esté disponible de manera más consistente en el futuro. Es una cadena que describe la clave, en lugar de un valor numérico. La lista de valores propuestos es un borrador de trabajo del W3C .
Encontré un shim para KeyboardEvent.key , pero aparentemente no está actualizado con la especificación.
Todavía es posible que esta historia tenga un final feliz.
Al probar JavaScript en Firefox 3.5, tengo acceso a constantes como KeyEvent.DOM_VK_D , pero no en Google Chrome. ¿Hay una forma de navegador de acceso a estas constantes?
He usado la solución de @Gumbo desde hace bastante tiempo. Debido a que tengo varios proyectos que necesitan este objeto, simplemente he creado un paquete Bower para él. Si alguien ya ha hecho esto, hágamelo saber ...
Simplemente bower install keyevent -S e bower install keyevent -S e incluya bower_components/src/keyevent.js en su proceso de compilación.
Nota : esta biblioteca es estúpida, si la instancia de KeyEvent ya existe, es probable que esto la obstruya.
Repo de GitHub: https://github.com/cybertoothca/keyevent
bower info keyevent para obtener información sobre el proyecto.
Puedes definir el objeto KeyEvent si no existe:
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
};
}
Ver también KeyEvent en DOM Nivel 3 .
También puedes usar un paquete ligero npm keycode keycode-js . Este contiene una lista de todas estas constantes de código clave y es fácil de usar.
Así es como lo usa, 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.'');
}
});
Aquí está la lista de constantes soportadas .
Este paquete no es más que una lista de códigos clave como este:
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;