event - Obtenga el valor de caracteres de KeyCode en JavaScript... luego recorte

keycode jquery (9)

Nombres de clave legibles indexados por clave

Hay relativamente pocos códigos clave, así que simplemente enumeré todos los valores correspondientes en una matriz estática, así que simplemente pude convertir el número 65 en A usando el keyboardMap[65]

No todos los códigos clave se asignan a un carácter imprimible por lo que se devuelve otra cadena identificable.

Es posible que deba modificar la matriz para satisfacer sus necesidades y simplemente puede devolver cadenas vacías para todos los caracteres que no le interese traducir. La siguiente matriz me permite determinar rápida y confiablemente qué tecla se presionó en cualquier entorno. ¡Disfrutar!

// names of known key codes (0-255) var keyboardMap = [ "", // [0] "", // [1] "", // [2] "CANCEL", // [3] "", // [4] "", // [5] "HELP", // [6] "", // [7] "BACK_SPACE", // [8] "TAB", // [9] "", // [10] "", // [11] "CLEAR", // [12] "ENTER", // [13] "ENTER_SPECIAL", // [14] "", // [15] "SHIFT", // [16] "CONTROL", // [17] "ALT", // [18] "PAUSE", // [19] "CAPS_LOCK", // [20] "KANA", // [21] "EISU", // [22] "JUNJA", // [23] "FINAL", // [24] "HANJA", // [25] "", // [26] "ESCAPE", // [27] "CONVERT", // [28] "NONCONVERT", // [29] "ACCEPT", // [30] "MODECHANGE", // [31] "SPACE", // [32] "PAGE_UP", // [33] "PAGE_DOWN", // [34] "END", // [35] "HOME", // [36] "LEFT", // [37] "UP", // [38] "RIGHT", // [39] "DOWN", // [40] "SELECT", // [41] "PRINT", // [42] "EXECUTE", // [43] "PRINTSCREEN", // [44] "INSERT", // [45] "DELETE", // [46] "", // [47] "0", // [48] "1", // [49] "2", // [50] "3", // [51] "4", // [52] "5", // [53] "6", // [54] "7", // [55] "8", // [56] "9", // [57] "COLON", // [58] "SEMICOLON", // [59] "LESS_THAN", // [60] "EQUALS", // [61] "GREATER_THAN", // [62] "QUESTION_MARK", // [63] "AT", // [64] "A", // [65] "B", // [66] "C", // [67] "D", // [68] "E", // [69] "F", // [70] "G", // [71] "H", // [72] "I", // [73] "J", // [74] "K", // [75] "L", // [76] "M", // [77] "N", // [78] "O", // [79] "P", // [80] "Q", // [81] "R", // [82] "S", // [83] "T", // [84] "U", // [85] "V", // [86] "W", // [87] "X", // [88] "Y", // [89] "Z", // [90] "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac) "", // [92] "CONTEXT_MENU", // [93] "", // [94] "SLEEP", // [95] "NUMPAD0", // [96] "NUMPAD1", // [97] "NUMPAD2", // [98] "NUMPAD3", // [99] "NUMPAD4", // [100] "NUMPAD5", // [101] "NUMPAD6", // [102] "NUMPAD7", // [103] "NUMPAD8", // [104] "NUMPAD9", // [105] "MULTIPLY", // [106] "ADD", // [107] "SEPARATOR", // [108] "SUBTRACT", // [109] "DECIMAL", // [110] "DIVIDE", // [111] "F1", // [112] "F2", // [113] "F3", // [114] "F4", // [115] "F5", // [116] "F6", // [117] "F7", // [118] "F8", // [119] "F9", // [120] "F10", // [121] "F11", // [122] "F12", // [123] "F13", // [124] "F14", // [125] "F15", // [126] "F16", // [127] "F17", // [128] "F18", // [129] "F19", // [130] "F20", // [131] "F21", // [132] "F22", // [133] "F23", // [134] "F24", // [135] "", // [136] "", // [137] "", // [138] "", // [139] "", // [140] "", // [141] "", // [142] "", // [143] "NUM_LOCK", // [144] "SCROLL_LOCK", // [145] "WIN_OEM_FJ_JISHO", // [146] "WIN_OEM_FJ_MASSHOU", // [147] "WIN_OEM_FJ_TOUROKU", // [148] "WIN_OEM_FJ_LOYA", // [149] "WIN_OEM_FJ_ROYA", // [150] "", // [151] "", // [152] "", // [153] "", // [154] "", // [155] "", // [156] "", // [157] "", // [158] "", // [159] "CIRCUMFLEX", // [160] "EXCLAMATION", // [161] "DOUBLE_QUOTE", // [162] "HASH", // [163] "DOLLAR", // [164] "PERCENT", // [165] "AMPERSAND", // [166] "UNDERSCORE", // [167] "OPEN_PAREN", // [168] "CLOSE_PAREN", // [169] "ASTERISK", // [170] "PLUS", // [171] "PIPE", // [172] "HYPHEN_MINUS", // [173] "OPEN_CURLY_BRACKET", // [174] "CLOSE_CURLY_BRACKET", // [175] "TILDE", // [176] "", // [177] "", // [178] "", // [179] "", // [180] "VOLUME_MUTE", // [181] "VOLUME_DOWN", // [182] "VOLUME_UP", // [183] "", // [184] "", // [185] "SEMICOLON", // [186] "EQUALS", // [187] "COMMA", // [188] "MINUS", // [189] "PERIOD", // [190] "SLASH", // [191] "BACK_QUOTE", // [192] "", // [193] "", // [194] "", // [195] "", // [196] "", // [197] "", // [198] "", // [199] "", // [200] "", // [201] "", // [202] "", // [203] "", // [204] "", // [205] "", // [206] "", // [207] "", // [208] "", // [209] "", // [210] "", // [211] "", // [212] "", // [213] "", // [214] "", // [215] "", // [216] "", // [217] "", // [218] "OPEN_BRACKET", // [219] "BACK_SLASH", // [220] "CLOSE_BRACKET", // [221] "QUOTE", // [222] "", // [223] "META", // [224] "ALTGR", // [225] "", // [226] "WIN_ICO_HELP", // [227] "WIN_ICO_00", // [228] "", // [229] "WIN_ICO_CLEAR", // [230] "", // [231] "", // [232] "WIN_OEM_RESET", // [233] "WIN_OEM_JUMP", // [234] "WIN_OEM_PA1", // [235] "WIN_OEM_PA2", // [236] "WIN_OEM_PA3", // [237] "WIN_OEM_WSCTRL", // [238] "WIN_OEM_CUSEL", // [239] "WIN_OEM_ATTN", // [240] "WIN_OEM_FINISH", // [241] "WIN_OEM_COPY", // [242] "WIN_OEM_AUTO", // [243] "WIN_OEM_ENLW", // [244] "WIN_OEM_BACKTAB", // [245] "ATTN", // [246] "CRSEL", // [247] "EXSEL", // [248] "EREOF", // [249] "PLAY", // [250] "ZOOM", // [251] "", // [252] "PA1", // [253] "WIN_OEM_CLEAR", // [254] "" // [255] ];

Nota: la posición de cada valor en el conjunto de arriba es importante. Los "" son marcadores de posición para códigos con valores desconocidos.

Pruebe el siguiente fragmento de código utilizando este enfoque de búsqueda de matriz estática ...

#key-codes, #key-names { font-family: courier, serif; font-size: 1.2em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="in" placeholder="Type here..." /> <button id="reset">Reset</button> <br/> <br/> <div id="key-codes">var keyCodes = [ ];</div> <div id="key-names">var keyNames = [ ];</div>

Códigos clave que vale la pena mencionar

Letras AZ: (65-90)

keyboardMap[65]; // A ... keyboardMap[90]; // Z

Dígitos 0-9: (48-57)

keyboardMap[48]; // 0 ... keyboardMap[57]; // 9

Teclado numérico 0-9: (96-105)

keyboardMap[96]; // NUMPAD0 ... keyboardMap[105]; // NUMPAD9

Teclas de flecha: (37-40)

keyboardMap[37]; // LEFT keyboardMap[38]; // UP keyboardMap[39]; // RIGHT keyboardMap[40]; // DOWN

Tecla de tabulación: (9)

keyboardMap[9]; // TAB

Introduzca la clave: (13)

keyboardMap[13]; // ENTER

Barra espaciadora: (32)

keyboardMap[32]; // SPACE

Clave específica del sistema operativo (91) Clave de Windows (Windows) o tecla de comando (Mac)

keyboardMap[91]; // OS_KEY

Clave Alt: (18)

keyboardMap[18]; // ALT

Llave de control: (17)

keyboardMap[17]; // CONTROL

Tecla Shift: (16)

keyboardMap[16]; // SHIFT

Bloq Mayús Clave: (20)

keyboardMap[20]; // CAPS_LOCK

Esto es lo que tengo ahora:

$("input").bind("keydown",function(e){ var value = this.value + String.fromCharCode(e.keyCode); }

Si e.keyCode puede no ser un carácter ASCII ( Alt , retroceso , del , flechas , etc.) ... ahora tendría que trim estos valores del value alguna manera (preferentemente mediante programación, no con tablas de búsqueda).

Estoy usando jQuery.

Debo usar el evento keydown . keyPress no se activa para ciertas teclas que necesito capturar ( Esc , del , retroceso , etc.).

No puedo usar setTimeout para obtener el valor de la entrada. setTimeout(function(){},0) es demasiado lento.

Consulte este enlace Obtenga código clave de la pulsación de tecla y valor de char para cualquier código de tecla

$(''input#inp'').keyup(function(e){ $(this).val(String.fromCharCode(e.keyCode)); $(''div#output'').html(''Keycode : '' + e.keyCode); });

En mi experiencia String.fromCharCode(e.keyCode) no es confiable. String.fromCharCode espera que los String.fromCharCode unicode sean un argumento; e.keyCode devuelve códigos de e.keyCode JavaScript. Los códigos clave de Javascript y los códigos de caracteres Unicode no son lo mismo. En particular, las teclas del teclado numérico devuelven un keycode de keycode diferente de las teclas numéricas ordinarias (ya que son claves diferentes) mientras que se devuelve el mismo keycode clave para letras lowercase y lowercase (presionó la misma tecla en ambos casos), a pesar de tener diferentes charcodes .

Por ejemplo, la clave numérica ordinaria 1 genera un evento con clave 49 mientras que la tecla numérica 1 (con Numlock activado ) genera el keycode clave 97. Usado con String.fromCharCode obtenemos lo siguiente:

String.fromCharCode(49) returns "1" String.fromCharCode(97) returns "a"

String.fromCharCode espera String.fromCharCode Unicode, no claves de JavaScript. La clave a genera un evento con un keycode clave de 65, independientemente del caso del personaje que generaría (también hay un modificador para si se presiona la tecla Shift , etc. en el evento). El carácter a tiene un charcode de charcode unicode de 61, mientras que el carácter A tiene un charcode de charcode de 41 (de acuerdo con, por ejemplo, http://www.utf8-chartable.de/ ). Sin embargo, esos son valores hex , la conversión a decimal nos da un charcode de 65 caracteres para "A" y 97 para "a". [1] Esto es coherente con lo que obtenemos de String.fromCharCode para estos valores.

Mi propio requisito se limitaba a procesar números y letras comunes (aceptando o rechazando dependiendo de la posición en la cadena) y dejando que los caracteres de control ( F -keys, Ctrl- algo) pasen. Por lo tanto, puedo verificar los caracteres de control, si no es un personaje de control, comparo con un rango y solo entonces necesito obtener el personaje real. Dado que no estoy preocupado por el caso (cambio todas las letras a mayúsculas de todos modos) y ya he limitado el rango de códigos de tecla, solo tengo que preocuparme por las teclas del teclado numérico. Lo siguiente es suficiente para eso:

String.fromCharCode((96 <= key && key <= 105)? key-48 : key)

En términos más generales, una función para devolver el carácter de un charcode forma charcode sería genial (tal vez como un complemento jQuery), pero no tengo tiempo para escribirlo ahora. Lo siento.

También mencionaría e.which (si está utilizando jQuery) que normaliza e.keyCode y e.charCode , para que no tenga que preocuparse por qué tipo de tecla se presionó. El problema con combinarlo con String.fromCharCode permanece.

[1] Estuve confundido por un tiempo -. todos los documentos dicen que String.fromCharCode espera un charcode unicode, mientras que en la práctica parecía funcionar para los códigos de caracteres ASCII, pero eso fue debido a la necesidad de convertir hexadecimal a hexadecimal, combinado con el hecho de que los caracteres alfabéticos ASCII y unicode decimales superposición de caracteres para letras latinas comunes.

En respuesta a este problema, acabo de escribir un plugin jQuery: https://github.com/bpeacock/key-to-charCode/

Está un poco deprimido y sucio y podría integrarse mejor en jQuery, pero es un comienzo.

Hace poco escribí un módulo llamado keysight que traduce keypress , keydown y keyup events en caracteres y claves respectivamente.

Ejemplo:

element.addEventListener("keydown", function(event) { var character = keysight(event).char })

Sé que esta es una vieja pregunta, pero la encontré hoy buscando una solución preempaquetada para este problema, y no encontré nada que realmente satisfaga mis necesidades.

Aquí hay una solución (solo en inglés) que admite correctamente mayúsculas (desplazadas), minúsculas, signos de puntuación, teclado numérico, etc.

También permite la identificación simple y directa de, y la reacción a, las teclas no imprimibles, como ESC, Flechas, teclas de función, etc.

https://jsfiddle.net/5hhu896g/1/

keyboardCharMap and keyboardNameMap are the key to making this work

Gracias a DaveAlger por salvarme algunos tipeos, ¡y muchos descubrimientos! - proporcionando el conjunto de claves con nombre.

Solo una nota importante: la respuesta aceptada anteriormente no funcionará correctamente para keyCode> = 144, es decir, punto, coma, guión, etc. Para ellos, debe usar un algoritmo más general:

let chrCode = keyCode - 48 * Math.floor(keyCode / 48); let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);

Si tiene curiosidad sobre por qué, esto es aparentemente necesario debido al comportamiento de la función String.fromCharCode() JS String.fromCharCode() . Para los valores de keyCode <= 96 , parece que se keyCode <= 96 utilizando la función:

chrCode = keyCode - 48 * Math.floor(keyCode / 48)

Para los valores de keyCode > 96 , parece correlacionarse con la función:

chrCode = keyCode

Si esto parece un comportamiento extraño, entonces bien ... Estoy de acuerdo. Lamentablemente, estaría muy lejos de ser la cosa más extraña que he visto en el núcleo de JS.

document.onkeydown = function(e) { let keyCode = e.keyCode; let chrCode = keyCode - 48 * Math.floor(keyCode / 48); let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode); console.log(chr); };

<input type="text" placeholder="Focus and Type"/>

Supongo que esto es para un juego o para un tipo de aplicación de respuesta rápida, de ahí el uso de KEYDOWN que KEYPRESS.

Editar : Dang! Estoy corregido (gracias Crescent Fresh y David): JQuery (o incluso más bien los hosts DOM subyacentes) no exponen los detalles de WM_KEYDOWN y de otros eventos. Más bien predigerían estos datos y, en el caso de keyDown incluso en JQuery, obtenemos:

event.keyCode para event.keyCode que no son de carácter
event.charCode para claves de caracteres

Tenga en cuenta que estas propiedades son los valores UniCode.
Tenga en cuenta que no pude encontrar una referencia autoritativa de eso en los documentos de JQuery, pero muchos ejemplos acreditados en la red se refieren a estas dos propiedades.

El siguiente código, adaptado de algún java (no javascript) mío, es totalmente erróneo ...

Lo siguiente le dará las partes "interesantes" del código clave:

value = e.KeyCode; repeatCount = value & 0xFF; scanCode = (value >> 16) & 0xFF; // note we take the "extended bit" deal w/ it later. wasDown = ((value & 0x4000) != 0); // indicate key was readily down (auto-repeat) if (scanCode > 127) // deal with extended else // "regular" character

Tal vez no entendí la pregunta correctamente, pero ¿no puedes usar la keyup si deseas capturar ambas entradas?

$("input").bind("keyup",function(e){ var value = this.value + String.fromCharCode(e.keyCode); });