Obtenga el valor del carácter de KeyCode en JavaScript ... luego recorte

152

Esto es lo que tengo ahora:

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

Si el e.keyCodeno puede haber un carácter ASCII ( Alt, backspace, del, arrows., Etc) ... Yo ahora necesito trimestos valores de valuealguna manera (preferiblemente mediante programación - no con tablas de búsqueda).

Estoy usando jQuery.

Debo usar el keydownevento. keyPressno se activa para ciertas claves que necesita para capturar ( Esc, del, backspace, etc.).

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

javascript jquery special-characters keycode David Murdoch
fuente
11
Debe usar keydownpara capturar códigos de caracteres? Te espera un viaje increíble : quirksmode.org/js/keys.html (sugerencia: ¡¡ uso keypress!! )
Crescent Fresh el
1
El caso del personaje no importa. Y necesito capturar arriba, abajo, izquierda, derecha, esc, del, retroceso para al menos FF e IE; así que presionar teclas está fuera de la cuestión. Gracias por la pista sin embargo. :-)
David Murdoch el
En respuesta a este problema, acabo de escribir un complemento jQuery: github.com/bpeacock/key-to-charCode Está un poco caído y sucio y podría integrarse mejor en jQuery, pero es un comienzo.
Brian Peacock
1
Para cualquiera que haya venido aquí tratando de resolver el problema KeyCode pero realmente solo quiere ver qué tecla se presionó, consulte esta respuesta . TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }
user1717828

Respuestas:

164

Tal vez no entendí la pregunta correctamente, pero ¿no puede usarla keyupsi desea capturar ambas entradas?

$("input").bind("keyup",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
});
David Hellsing
fuente
10
Eso no funciona con otras configuraciones regionales que están fuera del rango ASCII (como latin-1, por ejemplo, alemán, francés, italiano y español si debe saberlo). También falla para las claves no imprimibles, obviamente.
Florian Bösch
9
Esto también falla cuando se usan números en el teclado numérico, e.keyCode no es el código ASCII (o incluso UTF-x).
Tom Chiverton el
2
Mala respuesta, ni siquiera funciona con personajes básicos. Semicolon keyCode, por ejemplo, es 186, ejecute un String.fromCharCode () en él y obtendrá basura. El problema es que keyCode no corresponde a ASCII para todos los caracteres. El carácter ASCII para el punto y coma es 59. El mismo problema es cierto para cada carácter especial, keyCode NO devuelve el código correcto para String.fromCharCode ().
Alexander Tsepkov
193

En mi experiencia String.fromCharCode(e.keyCode)no es confiable. String.fromCharCodeespera códigos de barras unicode como argumento; e.keyCodedevuelve códigos de clave de JavaScript. ¡Los códigos de clave de Javascript y los códigos de código Unicode no son lo mismo! En particular, las teclas del teclado numérico devuelven un número diferente al keycodede las teclas numéricas ordinarias (ya que son teclas diferentes) mientras que la misma keycodese devuelve para ambas uppery lowercaseletras (presionó la misma tecla en ambos casos), a pesar de que tienen diferentes charcodes.

Por ejemplo, la tecla numérica ordinaria 1 genera un evento con keycode49, mientras que la tecla numérica 1 (con Numlockencendido) genera keycode97. Con String.fromCharCodeesto obtenemos lo siguiente:

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

String.fromCharCodeespera códigos de código unicode, no códigos de código javascript. La tecla agenera un evento con un valor keycodede 65, independiente del caso del carácter que generaría (también hay un modificador para si Shiftse presiona la tecla, etc. en el evento). El personaje atiene un Unicode charcodede 61 mientras que el personaje Atiene un charcode41 (según, por ejemplo, http://www.utf8-chartable.de/ ). Sin embargo, esos son hexvalores, la conversión a decimal nos da un charcode65 para "A" y 97 para "a". [1] Esto es consistente con lo que obtenemos de String.fromCharCodeestos valores.

Mi propio requisito se limitaba a procesar números y letras ordinarias (aceptar o rechazar dependiendo de la posición en la cadena) y dejar pasar los caracteres de control ( F-claves, Ctrl-algo). Por lo tanto, puedo verificar los caracteres de control, si no es un carácter de control, verifico contra un rango y solo entonces necesito obtener el carácter real. Dado que no me preocupan las mayúsculas y minúsculas (cambio todas las letras a mayúsculas de todos modos) y ya he limitado el rango de códigos, 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 de forma confiable el carácter de a charcodesería genial (tal vez como un complemento jQuery), pero no tengo tiempo para escribirlo en este momento. Lo siento.

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

[1] Estuve confundido por un tiempo -. todos los documentos dicen que String.fromCharCodeespera un código unicode charcode, mientras que en la práctica parecía funcionar para los códigos ASCII, pero creo que eso fue debido a la necesidad de convertir a decimal de hexadecimal, combinado con el hecho de que los códigos ASCII y los códigos decimales unicode se superponen para los comunes letras latinas.

Adán
fuente
2
Este comentario prácticamente resolvió todos mis problemas. Es sorprendente para mí que jQuery no haya implementado un "fromKeyCode" equivalente al "String.fromCharCode" de javascript
Chris J
27
Parece que el evento KeyPress hace esto. Ver stackoverflow.com/a/9350415/209568 . De los documentos de jQuery "Tenga en cuenta que las teclas presionadas y las teclas proporcionan un código que indica qué tecla se presionó, mientras que la tecla indica qué carácter se ingresó. Por ejemplo, una" a "minúscula se notificará como 65 al presionar la tecla y al presionar la tecla, pero como 97 al presionar la tecla . Todos los eventos informan que una "A" mayúscula es 65. Debido a esta distinción, al capturar teclas especiales, como las teclas de flecha, .keydown () o .keyup () es una mejor opción ".
Adam
Esto es muy desagradable para aquellos de nosotros que somos adictos al keydown.
Isaac Bolinger
Una nota sobre ese último bit sobre ASCII y Unicode. Unicode tiene los 128 caracteres ASCII en el mismo lugar. Esto fue intencional para que cualquier archivo codificado originalmente como ASCII pueda enmascararse como (y convertirse a) Unicode sin necesidad de trabajo. Sin embargo, los caracteres ASCII extendidos no están en el mismo lugar, por lo que si usó esos caracteres no tiene suerte.
DanielM
1
El punto keyCodees saber qué tecla se presionó, no saber qué personaje usar. Por ejemplo, "U" en un teclado Dvorak tiene el mismo código clave que "F" en un teclado QWERTY o "ㄹ" en un teclado coreano, etc. El punto no es convertirlo en un carácter, está ahí para que pueda asigna fácilmente cosas a una posición del teclado.
Vincent McNabb
77

Nombres clave legibles indexados por código clave

Hay relativamente pocos códigos clave por lo que simplemente una lista de los valores correspondientes en una matriz estática para que pudiera simplemente convertir el número 65en Ael usokeyboardMap[65]

No todos los códigos clave se asignan a un carácter imprimible, por lo que se devuelve alguna 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 desea traducir. La siguiente matriz me permite determinar de forma rápida y confiable 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 la matriz anterior es importante. El ""son marcadores de posición para los códigos con valores desconocidos.

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

Mostrar fragmento de código

Códigos clave dignos de mención

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 Tabulador: (9)

keyboardMap[9];  // TAB

Introducir clave: (13)

keyboardMap[13];  // ENTER

Tecla de barra espaciadora: (32)

keyboardMap[32];  // SPACE

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

keyboardMap[91];  // OS_KEY

Tecla Alt: (18)

keyboardMap[18];  // ALT

Clave de control: (17)

keyboardMap[17];  // CONTROL

Tecla Shift: (16)

keyboardMap[16];  // SHIFT

Tecla de bloqueo de mayúsculas: (20)

keyboardMap[20];  // CAPS_LOCK
DaveAlger
fuente
no funciona para caracteres especiales, si ingresa las teclas con la tecla Mayús, ¿alguna solución?
Shaik Matheen
14

Solo una nota importante: la respuesta aceptada arriba no funcionará correctamente para keyCode> = 144, es decir, punto, coma, guión, etc. Para aquellos que debería 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 JS incorporada String.fromCharCode(). Para los valores de keyCode <= 96esto parece mapearse usando la función:

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

Para los valores de keyCode > 96esto parece mapearse usando la función:

chrCode = keyCode

Si esto parece un comportamiento extraño, entonces bueno ... Estoy de acuerdo. Lamentablemente, estaría muy lejos de lo más extraño 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"/>
Expandir fragmento

galarant
fuente
1
Vas a confundir a las personas usando letuna respuesta a una pregunta de 2009. :-)
David Murdoch
12
Si alguien descubre ES6 al mirar hacia arriba, letentonces le hice un favor ;-)
galarant
@galarant ¿Puede explicar por qué / cómo funciona esto?
Izhar Aazmi
@IzharAazmi agregó una explicación. ¡Espero eso ayude!
galarant
1
Tampoco funciona correctamente para las teclas numéricas en un teclado numérico (la cuadrícula de teclas a la derecha de los teclados extendidos).
Scott Buchanan
2

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 los hosts DOM subyacentes) no exponen los detalles del WM_KEYDOWN y de otros eventos. Más bien, predigerieron estos datos y, en el caso de keyDown incluso en JQuery, obtenemos:

Tenga en cuenta que estas propiedades son los valores de UniCode.
Tenga en cuenta que no pude encontrar una referencia autorizada a 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 por lo tanto 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
mjv
fuente
hm, no va, scanCode siempre da como resultado 0. Y e.KeyCode debe ser e.keyCode (KeyCode no está definido).
David Murdoch el
Hola ahora ... Hola, espera ... ¿qué? ¿Estamos hablando de JScript aquí o algo así?
Crescent Fresh el
@David M. Mi mal, tal vez JQuery "pre-digiere" estas partes del código para nosotros. Lo estoy investigando ahora.
mjv el
1
@mjv: ¿de dónde sacaste este código? ¿Alguna vez te ha funcionado? La implementación de AFAIK no DOM codifica toda esa información en el objeto de evento ( keydowno no).
Crescent Fresh el
@Crescent: lo adapté rápida e ingenuamente de un código mío de Java, muy antiguo ... De todos modos, tienes toda la razón: ninguno de los hosts DOM distribuye tales eventos sin procesar, incluso para el teclado. Arreglé mi prosa en consecuencia; sigo buscando un documento autorizado sobre el tema en JQuery.com
mjv el
0

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

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

También permite la identificación simple y directa de teclas que no se pueden imprimir, 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 ahorrarme algo de tipeo, ¡y mucho descubrimiento! - al proporcionar la matriz de claves con nombre.

BRebey
fuente
¡Tu violín es excelente! Gracias por compartir. Funciona excelentemente. Lo estoy usando para implementar una edición de cursor múltiple de estilo Sublime para campos de formulario con elementos que tienen los mismos valores
Todd Hammer
0

Hace poco escribí un llamado módulo de keysight que se traduce keypress, keydowny keyupeventos en personajes y claves respectivamente.

Ejemplo: 

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
 })
BT
fuente
¿admite teclas como ñ?
Arnold Roa
@ArnoldRoa Acabo de empujar algo que espero sea compatible con personajes como ese. No tengo un teclado con caracteres acentuados, ¿te importaría probar?
BT
0

Para aquellos de ustedes que vinieron aquí buscando los valores de caracteres Unicode reales para un código clave, como lo hice, aquí hay una función para eso. Por ejemplo, dado el código de clave unicode de la flecha derecha, esto generará la cadena visible\u001B\u005B\u0043

function toUnicode(theString) {
    var unicodeString = '';
    for (var i = 0; i < theString.length; i++) {
        var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
        while (theUnicode.length < 4) {
            theUnicode = '0' + theUnicode;
        }
        theUnicode = '\\u' + theUnicode;
        unicodeString += theUnicode;
    }
    return unicodeString;
}
d'Artagnan Evergreen Barbosa
fuente
0

También puede usar la propiedad de solo lectura key. También respeta teclas especiales como shiftetc. y es compatible con IE9.

Cuando se presiona un carácter no imprimible o especial, el valor estará activado de los valores clave definidos como 'Shift'o 'Multiply'.

  • Teclado     event.key
  • X             -> 'x'
  • Shift+ X ->'X'
  • F5            -> 'F5'
Kim Kern
fuente
-2

Consulte este enlace Obtenga el código de la tecla al presionar la tecla y el 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);  
});
usuario2269057
fuente
1
¡Esto es incorrecto! Como no tiene en cuenta el idioma actual habilitado en el teclado del usuario. Por ejemplo, ingreso 'ф', pero me da 'a' ...
Vadim Guzev
esto es incorrecto, el texto cambiará según el diseño del teclado
Arnold Roa