Voici ce que j'ai maintenant:

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

Si le e.keyCodene peut pas être un caractère ASCII ( Alt, backspace, del, arrows., Etc) ... Je voudrais maintenant besoin de trimces valeurs de valuefaçon ou d' autre ( de préférence par programmation - pas avec des tables de consultation).

J'utilise jQuery.

Je dois utiliser l' keydownévénement. keyPressne pas activer certaines touches que je dois capture ( Esc, del, backspace, etc.).

Je ne peux pas utiliser setTimeoutpour obtenir la valeur de l'entrée. setTimeout(function(){},0)est trop lent.

Peut-être que je n'ai pas bien compris la question, mais ne pouvez-vous pas utiliser keyupsi vous souhaitez capturer les deux entrées?

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

Dans mon expérience String.fromCharCode(e.keyCode)n'est pas fiable. String.fromCharCodeattend des charcodes unicode comme argument; e.keyCoderenvoie les codes d'accès javascript. Les keycodes Javascript et les charcodes Unicode ne sont pas la même chose! En particulier, les touches du pavé numérique renvoient une touche différente keycodedes touches numériques ordinaires (car ce sont des touches différentes) tandis que la même chose keycodeest renvoyée pour les deux upperet les lowercaselettres (vous avez appuyé sur la même touche dans les deux cas), bien qu'elles soient différentes charcodes.

Par exemple, la touche numérique ordinaire 1 génère un événement avec keycode49 tandis que la touche du pavé numérique 1 (avec activé Numlock) génère keycode97. Utilisé avec, String.fromCharCodenous obtenons ce qui suit:

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

String.fromCharCodeattend des charcodes unicode, pas des keycodes javascript. La touche agénère un événement avec un keycodede 65, indépendant de la casse du caractère qu'elle générerait (il existe également un modificateur pour savoir si la Shifttouche est enfoncée, etc. dans l'événement). Le caractère aa un unicode charcodede 61 tandis que le caractère Aa un charcodede 41 (selon, par exemple, http://www.utf8-chartable.de/ ). Cependant, ce sont des hexvaleurs, la conversion en décimal nous donne un charcodede 65 pour "A" et 97 pour "a". [1] Ceci est cohérent avec ce que nous tirons de String.fromCharCodeces valeurs.

Ma propre exigence était limitée au traitement des nombres et des lettres ordinaires (accepter ou rejeter selon la position dans la chaîne) et laisser Fpasser les caractères de contrôle ( -keys, Ctrl-quelque chose). Ainsi, je peux vérifier les caractères de contrôle, si ce n'est pas un caractère de contrôle, je vérifie par rapport à une plage et alors seulement j'ai besoin d'obtenir le caractère réel. Étant donné que je ne suis pas inquiet pour la casse (je change toutes les lettres en majuscules de toute façon) et que j'ai déjà limité la gamme de codes clés, je n'ai qu'à m'inquiéter des touches du pavé numérique. Ce qui suit suffit pour cela:

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

Plus généralement, une fonction pour renvoyer de manière fiable le caractère à partir de a charcodeserait géniale (peut-être en tant que plugin jQuery), mais je n'ai pas le temps de l'écrire pour l'instant. Désolé.

Je mentionnerais également e.which(si vous utilisez jQuery) qui normalise e.keyCodeet e.charCode, afin que vous n'ayez pas à vous soucier du type de touche enfoncée. Le problème de le combiner avec String.fromCharCodedemeure.

[1] J'ai été confus pendant un certain temps -. tous les documents disent que String.fromCharCodes'attend à un unicode charcode, alors qu'en pratique, cela semblait fonctionner pour les charcodes ASCII, mais c'était, je pense, dû à la nécessité de convertir en décimal à partir de l'hexagone, combiné avec le fait que les charcodes ASCII et les charcodes décimaux unicode se chevauchent pour l'ordinaire lettres latines.

Noms de clé lisibles indexés par code de clé

Il y a relativement peu de codes clés, j'ai donc simplement répertorié toutes les valeurs correspondantes dans un tableau statique afin que je puisse simplement convertir le nombre 65en AutilisationkeyboardMap[65]

Tous les codes de clé ne correspondent pas à un caractère imprimable, donc une autre chaîne identifiable est renvoyée.

Vous devrez peut-être modifier le tableau en fonction de vos besoins et renvoyer simplement des chaînes vides pour tous les caractères que vous ne souhaitez pas traduire. Le tableau suivant me permet de déterminer rapidement et de manière fiable quelle touche a été enfoncée dans n'importe quel environnement. Prendre plaisir!

// 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]
];

Remarque: la position de chaque valeur dans le tableau ci-dessus est importante. Il ""existe des espaces réservés pour les codes avec des valeurs inconnues.

Essayez l'extrait de code suivant à l'aide de cette approche de recherche de tableau statique ...

var keyCodes = [];

$("#reset").click(function() {
  keyCodes = [];
  $("#in").val("");
  $("#key-codes").html("var keyCodes = [ ];");
  $("#key-names").html("var keyNames = [ ];");
});

$(document).keydown(function(e) {
  keyCodes.push(e.which);
  updateOutput();
});

function updateOutput() {
  var kC = "var keyCodes = [ ";
  var kN = "var keyNames = [ ";

  var len = keyCodes.length;

  for (var i = 0; i < len; i++) {
    kC += keyCodes[i];
    kN += "'"+keyboardMap[keyCodes[i]]+"'";
    if (i !== (len - 1)) {
      kC += ", ";
      kN += ", ";
    }
  }

  kC += " ];";
  kN += " ];";

  $("#key-codes").html(kC);
  $("#key-names").html(kN);
}



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

#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>

Codes clés à noter

Lettres AZ: (65-90)

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

Chiffres 0-9: (48-57)

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

Pavé numérique 0-9: (96-105)

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

Touches fléchées: (37-40)

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

Touche de tabulation: (9)

keyboardMap[9];  // TAB

Entrer la clé: (13)

keyboardMap[13];  // ENTER

Touche de la barre d'espace: (32)

keyboardMap[32];  // SPACE

Clé spécifique au système d'exploitation (91) Touche Windows (Windows) ou touche de commande (Mac)

keyboardMap[91];  // OS_KEY

Touche Alt: (18)

keyboardMap[18];  // ALT

Clé de contrôle: (17)

keyboardMap[17];  // CONTROL

Touche Shift: (16)

keyboardMap[16];  // SHIFT

Touche de verrouillage des majuscules: (20)

keyboardMap[20];  // CAPS_LOCK

Juste une remarque importante: la réponse acceptée ci-dessus ne fonctionnera pas correctement pour keyCode> = 144, c'est-à-dire point, virgule, tiret, etc. Pour ceux-ci, vous devriez utiliser un algorithme plus général:

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

Si vous êtes curieux de savoir pourquoi, cela est apparemment nécessaire en raison du comportement de la fonction JS intégrée String.fromCharCode(). Pour les valeurs de keyCode <= 96il semble mapper en utilisant la fonction:

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

Pour les valeurs de keyCode > 96il semble mapper en utilisant la fonction:

chrCode = keyCode

Si cela semble être un comportement étrange, alors je suis d'accord. Malheureusement, ce serait très loin d'être la chose la plus étrange que j'ai vue dans le noyau 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"/>

Je suppose que c'est pour un jeu ou pour un type d'application à réponse rapide, d'où l'utilisation de KEYDOWN plutôt que KEYPRESS.

Edit : Dang! Je reste corrigé (merci Crescent Fresh et David): JQuery (ou même plutôt les hôtes DOM sous-jacents) n'expose pas le détail du WM_KEYDOWN et des autres événements. Au contraire, ils pré-digèrent ces données et, dans le cas de keyDown même dans JQuery, nous obtenons:

• event.keyCode pour les touches sans caractère
• event.charCode pour les touches de caractères

Notez que ces propriétés sont les valeurs UniCode.
Notez que je n'ai pas pu trouver une référence faisant autorité à cela dans la documentation JQuery, mais de nombreux exemples réputés sur le net font référence à ces deux propriétés.

Le code suivant, adapté de certains de mes java (pas javascript), est donc totalement faux ...

Ce qui suit vous donnera les parties "intéressantes" du code clé:

  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

Je sais que c'est une vieille question, mais je l'ai rencontrée aujourd'hui à la recherche d'une solution pré-emballée à ce problème, et je n'ai rien trouvé qui réponde vraiment à mes besoins.

Voici une solution (en anglais uniquement) qui prend correctement en charge les majuscules (décalées), les minuscules, la ponctuation, le clavier numérique, etc.

Il permet également une identification simple et directe des touches non imprimables, et une réaction à celles-ci, telles que ESC, flèches, touches de fonction, etc.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Merci à DaveAlger de m'avoir sauvé un peu de frappe - et beaucoup de découvertes! - en fournissant le Named Key Array.

J'ai récemment écrit un module appelé Keysight qui se traduit keypress, keydownet les keyupévénements en caractères et les touches respectivement.

Exemple:

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

Pour ceux d'entre vous qui sont venus ici à la recherche des valeurs de caractères Unicode réelles pour un code clé, comme je l'ai fait, voici une fonction pour cela. Par exemple, étant donné le code clé unicode de la flèche droite, cela affichera la chaîne 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;
}

Vous pouvez également utiliser la propriété en lecture seule key. Il respecte également les touches spéciales commeshift etc. et est pris en charge par IE9.

Lorsqu'un caractère non imprimable ou spécial est pressé, la valeur sera l'une des valeurs clés définies comme 'Shift'ou 'Multiply'.

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

Référez-vous à ce lien Obtenir le code clé à partir de la pression sur la touche et la valeur du caractère pour tout code clé

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