Ottieni il valore del carattere da KeyCode in JavaScript ... quindi taglia


152

Questo è quello che ho ora:

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

Se la e.keyCodepuò non essere un carattere ASCII ( Alt, backspace, del, arrows., Ecc) ... Vorrei ora bisogno di trimquesti valori da valuequalche modo (preferibilmente a livello di codice - non con tabelle di ricerca).

Sto usando jQuery.

Devo usare l' keydownevento. keyPressnon attiva per alcuni tasti che devo cattura ( Esc, del, backspace, etc.).

Non posso usare setTimeoutper ottenere il valore dell'input. setTimeout(function(){},0)è troppo lento.


11
È necessario utilizzare keydownper acquisire i codici carattere? Fai un giro infernale : quirksmode.org/js/keys.html (suggerimento: usa keypress!! )
Crescent Fresh,

1
Il caso del personaggio non ha importanza. E ho bisogno di catturare su, giù, sinistra, destra, esc, del, backspace per almeno FF e IE; quindi la pressione dei tasti è fuori discussione. Grazie per il suggerimento però. :-)
David Murdoch,

In risposta a questo problema ho appena scritto un plugin jQuery: github.com/bpeacock/key-to-charCode È un po 'sporco e sporco e potrebbe essere meglio integrato in jQuery, ma è un inizio.
Brian Peacock,

1
Per chiunque sia venuto qui cercando di risolvere il problema KeyCode ma vuole solo vedere quale tasto è stato premuto, controlla questa risposta . TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }
user1717828,

Risposte:


164

Forse non ho capito bene la domanda, ma non puoi usare keyupse vuoi catturare entrambi gli input?

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

10
Ciò non funziona con altre versioni locali al di fuori dell'intervallo ASCII (come ad esempio latino-1, ad esempio tedesco, francese, italiano e spagnolo, se necessario). Fallisce anche per le chiavi non stampabili, ovviamente.
Florian Bösch

9
Ciò fallisce anche quando si usano i numeri sul tastierino numerico, e.keyCode non è il codice ASCII (o anche UTF-x).
Tom Chiverton

2
Risposta errata, non funziona nemmeno con i personaggi di base. Il punto e virgola punto chiave, ad esempio, è 186, esegui String.fromCharCode () su di esso e otterrai immondizia. Il problema è che keyCode non corrisponde a ASCII per tutti i caratteri. Il carattere ASCII per il punto e virgola è 59. Lo stesso problema vale per ogni carattere speciale, keyCode NON restituisce il codice corretto per String.fromCharCode ().
Alexander Tsepkov

193

Nella mia esperienza String.fromCharCode(e.keyCode)è inaffidabile. String.fromCharCodesi aspetta che i codici Unicode siano un argomento; e.keyCoderestituisce i codici chiave javascript. I codici chiave Javascript e i codici carattere Unicode non sono la stessa cosa! In particolare, i tasti del tastierino numerico restituiscono un tasto diverso keycodedai normali tasti numerici (poiché si tratta di tasti diversi) mentre lo stesso keycodeviene restituito per entrambi uppere per le lowercaselettere (in entrambi i casi è stato premuto lo stesso tasto), nonostante siano diversi charcodes.

Ad esempio, il normale tasto numerico 1 genera un evento con keycode49 mentre il tasto numerico 1 (con Numlockon) genera keycode97. Usato con String.fromCharCodeotteniamo quanto segue:

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

String.fromCharCodesi aspetta codici Unicode, non codici chiave JavaScript. Il tasto agenera un evento con un valore keycodedi 65, indipendente dal caso del carattere che genererebbe (c'è anche un modificatore per se il Shifttasto viene premuto, ecc. Nell'evento). Il personaggio aha un unicode charcodedi 61 mentre il personaggio Aha un charcodedi 41 (secondo, ad esempio, http://www.utf8-chartable.de/ ). Tuttavia, questi sono hexvalori, la conversione in decimale ci dà un valore charcodedi 65 per "A" e 97 per "a". [1] Ciò è coerente con ciò che otteniamo String.fromCharCodeper questi valori.

Il mio requisito era limitato all'elaborazione di numeri e lettere ordinarie (accettando o rifiutando in base alla posizione nella stringa) e lasciando Fpassare i caratteri di controllo ( -key, -qualcosa Ctrl). In questo modo posso controllare i personaggi di controllo, se non è un personaggio di controllo che controllo contro un intervallo e solo allora devo ottenere il personaggio reale. Dato che non sono preoccupato per il caso (cambio comunque tutte le lettere in maiuscolo) e ho già limitato la gamma di codici chiave, devo solo preoccuparmi dei tasti del tastierino numerico. Per questo è sufficiente:

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

Più in generale, una funzione per restituire il personaggio in modo affidabile da a charcode sarebbe fantastica (forse come un plugin jQuery), ma non ho tempo di scriverlo proprio ora. Scusate.

Vorrei anche menzionare e.which (se stai usando jQuery) che si normalizza e.keyCodee e.charCode, quindi non devi preoccuparti di quale tipo di tasto è stato premuto. Il problema di combinarlo con String.fromCharCoderimane.

[1] Sono stato confuso per un po '-. tutti i documenti dicono che si String.fromCharCodeaspetta un unicode charcode, mentre in pratica sembrava funzionare per i codici di caratteri ASCII, ma questo è stato a causa della necessità di convertire in decimali da esadecimali, combinato con il fatto che i codici di caratteri ASCII e i codici di decimali unicode si sovrappongono per l'ordinario lettere latine.


2
Questo commento ha praticamente sostituito tutti i miei problemi. È sorprendente per me che jQuery non abbia implementato un "fromKeyCode" equivalente a "String.fromCharCode" di javascript
Chris J

27
Sembra che l'evento KeyPress faccia questo. Vedi stackoverflow.com/a/9350415/209568 . Dai documenti jQuery "Nota che il keydown e il keyup forniscono un codice che indica quale tasto è premuto, mentre il keypress indica quale carattere è stato inserito. Ad esempio, una" a "minuscola verrà riportata come 65 per keydown e keyup, ma come 97 per keypress Una "A" maiuscola viene segnalata come 65 da tutti gli eventi. Per questa distinzione, quando si catturano sequenze di tasti speciali come i tasti freccia, .keydown () o .keyup () è una scelta migliore. "
Adam,

Questo è molto spiacevole per quelli di noi che sono dipendenti dal keydown.
Isaac Bolinger,

Una nota sull'ultimo bit di ASCII e Unicode. Unicode ha tutti i 128 caratteri ASCII nello stesso posto. Questo è stato intenzionale in modo che qualsiasi file originariamente codificato come ASCII possa mascherarsi come (ed essere convertito in) Unicode senza alcun lavoro richiesto. I caratteri ASCII estesi non si trovano nello stesso posto, quindi se li hai usati non sei fortunato.
DanielM,

1
Il punto keyCodeè sapere quale tasto è stato premuto, non sapere quale personaggio usare. Ad esempio, "U" su una tastiera Dvorak ha lo stesso codice chiave di "F" su una tastiera QWERTY o "ㄹ" su una tastiera coreana ecc. Il punto non è convertirlo in un carattere, è lì in modo che tu possa mappare facilmente le cose su una posizione della tastiera.
Vincent McNabb,

77

Nomi chiave leggibili indicizzati dal codice chiave

Esistono relativamente pochi codici chiave, quindi ho semplicemente elencato tutti i valori corrispondenti in un array statico in modo da poter semplicemente convertire il numero 65in AutilizzokeyboardMap[65]

Non tutti i codici chiave vengono associati a un carattere stampabile, pertanto viene restituita un'altra stringa identificabile.

Potrebbe essere necessario modificare l'array in base alle proprie esigenze e può semplicemente restituire stringhe vuote per tutti i caratteri che non si desidera tradurre. La seguente matrice mi consente di determinare in modo rapido e affidabile quale tasto è stato premuto in qualsiasi ambiente. Godere!

// 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 posizione di ciascun valore nella matrice sopra è importante. L' ""sono segnaposto per i codici con valori sconosciuti.

Prova il seguente frammento di codice usando questo approccio di ricerca di array statici ...


Codici chiave da notare

Lettere AZ: (65-90)

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

Cifre 0-9: (48-57)

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

Tastierino numerico 0-9: (96-105)

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

Tasti freccia: (37-40)

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

Tasto Tab: (9)

keyboardMap[9];  // TAB

Tasto Invio: (13)

keyboardMap[13];  // ENTER

Tasto barra spaziatrice: (32)

keyboardMap[32];  // SPACE

Tasto specifico del sistema operativo (91) Tasto Windows (Windows) o Tasto comando (Mac)

keyboardMap[91];  // OS_KEY

Tasto Alt: (18)

keyboardMap[18];  // ALT

Tasto di controllo: (17)

keyboardMap[17];  // CONTROL

Tasto Maiusc: (16)

keyboardMap[16];  // SHIFT

Tasto BLOC MAIUSC: (20)

keyboardMap[20];  // CAPS_LOCK

non funziona per caratteri speciali, se inserisci i tasti con il tasto Maiusc, qualche soluzione?
Shaik Matheen,

14

Solo una nota importante: la risposta accettata sopra non funzionerà correttamente per keyCode> = 144, ovvero punto, virgola, trattino, ecc. Per quelli che dovresti usare un algoritmo più generale:

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

Se sei curioso di sapere perché, questo è apparentemente necessario a causa del comportamento della funzione JS integrata String.fromCharCode(). Per i valori di keyCode <= 96esso sembra mappare usando la funzione:

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

Per i valori di keyCode > 96esso sembra mappare usando la funzione:

chrCode = keyCode

Se questo sembra un comportamento strano, allora bene ... Sono d'accordo. Purtroppo, sarebbe molto lontano dalla cosa più strana che abbia mai visto nel core di 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"/>


1
Stai per confondere le persone usando letuna risposta a una domanda del 2009. :-)
David Murdoch,

12
Se qualcuno scopre ES6 guardando in alto, letallora ho fatto loro un favore ;-)
galarante

@galarant Puoi spiegare perché / come funziona?
Izhar Aazmi,

@IzharAazmi ha aggiunto una spiegazione. Spero che sia d'aiuto!
galante

1
Inoltre, non funziona correttamente per i tasti numerici di un tastierino numerico (la griglia di tasti a destra delle tastiere estese).
Scott Buchanan,

2

Suppongo che questo sia per un gioco o per un tipo di applicazione a risposta rapida, quindi l'uso di KEYDOWN di KEYPRESS.

Modifica : Dang! Sono corretto (grazie Crescent Fresh e David): JQuery (o piuttosto piuttosto gli host DOM sottostanti) non espongono i dettagli di WM_KEYDOWN e di altri eventi. Piuttosto pre-digeriscono questi dati e, nel caso di keyDown anche in JQuery, otteniamo:

Si noti che queste proprietà sono i valori UniCode.
Nota, non sono stato in grado di trovare un riferimento autorevole a quello nei documenti di JQuery, ma molti esempi affidabili sulla rete fanno riferimento a queste due proprietà.

Il seguente codice, adattato da alcuni dei miei java (non javascript), è quindi totalmente sbagliato ...

Quanto segue ti fornirà le parti "interessanti" del codice chiave:

  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

hm, no go, scanCode si traduce sempre in 0. E e.KeyCode dovrebbe essere e.keyCode (KeyCode non è definito).
David Murdoch,

Ehi ora ... Ciao, aspetta ... wha ?? Stiamo parlando di JScript qui o qualcosa del genere?
Crescent Fresh,

@ David M. Mio cattivo, forse JQuery "pre-digerisce" queste parti di codice per noi. Ci sto esaminando ora.
mjv,

1
@mjv: dove hai preso questo codice? Ha mai funzionato per te? AFAIK nessuna implementazione DOM codifica tutte queste informazioni nell'oggetto evento ( keydowno meno).
Crescent Fresh,

@Crescent: l'ho adattato rapidamente e ingenuamente da un mio codice Java, molto vecchio in quel ... Comunque, hai perfettamente ragione: nessuno degli host DOM distribuisce eventi così grezzi, anche per la tastiera. Ho corretto la mia prosa di conseguenza; sto ancora cercando un autorevole documento sull'argomento da JQuery.com
mjv

0

So che questa è una vecchia domanda, ma oggi mi sono imbattuto nella ricerca di una soluzione preconfezionata a questo problema e non ho trovato nulla che soddisfacesse davvero le mie esigenze.

Ecco una soluzione (solo in inglese) che supporta correttamente maiuscole (maiuscole), minuscole, punteggiatura, tastierino numerico, ecc.

Consente inoltre l'identificazione semplice e diretta di - e la reazione a - tasti non stampabili, come ESC, frecce, tasti funzione, ecc.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Grazie a DaveAlger per avermi salvato un po 'di battitura a macchina e molte scoperte! - fornendo il Key Array denominato.


Il tuo violino è eccellente! Grazie per la condivisione. Funziona in modo eccellente. Lo sto usando per implementare una modifica multi-cursore in stile Sublime per campi modulo con elementi con gli stessi valori
Todd Hammer,

0

Recentemente ho scritto un modulo chiamato keysight che traduce keypress, keydownekeyup gli eventi in personaggi e le chiavi, rispettivamente.

Esempio:

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

supporta chiavi come ñ?
Arnold Roa,

@ArnoldRoa Ho appena spinto qualcosa che si spera possa supportare personaggi del genere. Non ho una tastiera con caratteri accentati, quindi ti dispiacerebbe testare?
BT,

0

Per quelli di voi che sono venuti qui alla ricerca dei valori dei caratteri Unicode effettivi per un codice chiave, come ho fatto io, ecco una funzione per questo. Ad esempio, dato il codice unicode della freccia a destra, questo genererà la stringa visibile\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;
}

0

Puoi anche usare la proprietà di sola lettura key. Rispetta anche tasti speciali comeshift ecc. è supportato da IE9.

Quando viene premuto un carattere non stampabile o speciale, il valore sarà su valori chiave definiti come 'Shift'o 'Multiply'.

  • Tastiera     event.key
  • X             -> 'x'
  • Shift+ X ->'X'
  • F5            -> 'F5'

-2

Fare riferimento a questo collegamento Ottieni codice chiave dalla pressione dei tasti e valore char per qualsiasi codice chiave

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

1
Questo non è corretto! Poiché non tiene conto della lingua corrente abilitata sulla tastiera dell'utente. Ad esempio, inserisco 'ф', ma dà 'a' ...
Vadim Guzev,

questo non è corretto, il testo cambierà in base alla disposizione della tastiera
Arnold Roa,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.