Obtenir la valeur de caractère de KeyCode en JavaScript ... puis découpez
Voici ce que j'ai maintenant:
$("input").bind("keydown",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
}
Si le e.keyCode peut ne pas être un caractère ASCII (Alt, backspace, del, arrows, etc) ... Il me faudrait maintenant trim ces valeurs de value en quelque sorte (de préférence par programme - pas avec des tables de recherche).
J'utilise jQuery.
Je dois utiliser l'événement keydown. keyPress ne s'active pas pour certaines clés que je dois capturer (Esc, del, backspace, etc.).
Je ne peux pas utiliser setTimeout pour obtenir la valeur de l'entrée. setTimeout(function(){},0) est trop lent.
Je n’ai peut-être pas bien compris la question, mais ne pouvez-vous pas utiliser keyup si vous souhaitez capturer les deux entrées?
$("input").bind("keyup",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
});
D'après mon expérience, String.fromCharCode(e.keyCode) n'est pas fiable. String.fromCharCode attend les codes de caractères unicode en tant qu'argument; e.keyCode renvoie les codes clés javascript. Les codes de code Javascript et les codes de caractères unicode ne sont pas la même chose! En particulier, les touches numériques renvoient un keycodedifférent des clés numériques ordinaires (car elles sont différentes) tandis que le même keycodeest renvoyé pour upperet lowercaselettres (vous avez appuyé sur la même clé dans les deux cas), malgré le même nom 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 Numlock on) génère keycode97. Utilisé avec String.fromCharCode, nous obtenons ce qui suit:
String.fromCharCode(49) returns "1"
String.fromCharCode(97) returns "a"
String.fromCharCode attend les codes de caractères unicode, pas les codes de clés javascript. La clé a génère un événement avec un keycodede 65, indépendant de la casse du caractère qu'il générerait (il existe également un modificateur pour Shift touche est enfoncée, etc. dans l’événement). Le personnage a a unicode charcodede 61 alors que le caractère A a un charcodede 41 (selon, par exemple, http://www.utf8-chartable.de/ ). Cependant, ce sont des valeurs hexname__; la conversion en décimal nous donne un charcodeégal à 65 pour "A" et à 97 pour "a". [1] Ceci est cohérent avec ce que nous obtenons de String.fromCharCode pour ces valeurs.
Ma propre exigence était limitée au traitement de chiffres et de lettres ordinaires (accepter ou refuser en fonction de la position dans la chaîne) et laisser des caractères de contrôle (F-clés, Ctrl-quelque chose) à travers. Ainsi, je peux vérifier les caractères de contrôle. S'il ne s'agit pas d'un caractère de contrôle, je le compare à une plage et ce n'est qu'à ce moment-là que je dois obtenir le caractère réel. Étant donné que je ne m'inquiète pas de la casse (je change toutes les lettres en majuscules de toute façon) et que j'ai déjà limité le nombre de codes de clé, 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 permettant de retourner de manière fiable le caractère d'un charcodeserait formidable (peut-être comme un plugin jQuery), mais je n'ai pas le temps de l'écrire pour l'instant. Pardon.
Je mentionnerais également e.which (si vous utilisez jQuery) qui normalise e.keyCode et e.charCode, de sorte que vous n’ayez pas à vous soucier du type de touche enfoncé. Le problème de la combinaison avec String.fromCharCode reste.
[1] J'ai été confus pendant un moment -. tous les docs disent que String.fromCharCode s'attend à un unicode charcodename__, alors qu'en pratique cela semblait fonctionner pour ASCII codes car, mais je pense que c'était dû à la nécessité de convertir en décimal à partir d'hex, combiné au fait que ASCII les codes de caractères et les codes de caractères décimaux unicodes se chevauchent pour les lettres latines ordinaires.
Noms de clés lisibles indexés par code de clé
Il y a relativement peu de codes de clé, j'ai donc simplement répertorié toutes les valeurs correspondantes dans un tableau statique pour pouvoir simplement convertir le nombre 65 en A à l'aide de keyboardMap[65].
Tous les codes de clé ne correspondent pas à un caractère imprimable, de sorte qu'une autre chaîne identifiable est renvoyée.
Vous devrez peut-être modifier le tableau en fonction de vos besoins et pouvez simplement renvoyer 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. Les
""sont des espaces réservés pour les codes avec des valeurs inconnues.
Essayez l'extrait de code suivant en utilisant 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 A à Z: (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 barre d'espace: (32)
keyboardMap[32]; // SPACE
Clé spécifique au système d'exploitation (91) clé Windows (Windows) ou touche de commande (Mac)
keyboardMap[91]; // OS_KEY
Touche Alt: (18)
keyboardMap[18]; // ALT
Clé de commande: (17)
keyboardMap[17]; // CONTROL
Touche Shift: (16)
keyboardMap[16]; // SHIFT
Touche de verrouillage des majuscules: (20)
keyboardMap[20]; // CAPS_LOCK
Je suppose que c'est pour un jeu ou pour un type d'application à réponse rapide d'où l'utilisation de KEYDOWN à KEYPRESS.
Edit: Dang! Je me tiens corrigé (merci Crescent Fresh et David): JQuery (ou même plutôt les hôtes DOM sous-jacents) ne pas expose le détail du WM_KEYDOWN et d'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 clés autres que des caractères
- event.charCode pour les clés de caractère
Notez que ces propriétés sont les valeurs UniCode.
Remarque: je ne pouvais pas trouver de référence faisant autorité dans les documents 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 keycode:
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
Pour ceux d'entre vous qui sont venus ici à la recherche des valeurs de caractères Unicode réelles pour un code de touche, comme je l'ai fait, voici une fonction pour cela. Par exemple, étant donné le code unicode de la flèche vers la droite, la chaîne visible \u001B\u005B\u0043 sera affichée.
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 comme shift etc. et est pris en charge par IE9.
Lorsque vous appuyez sur un caractère non imprimable ou spécial, la valeur définie est valeurs de clé comme 'Shift' ou 'Multiply'.
- Clavier
event.key - X ->
'x' - Shift+X ->
'X' - F5->
'F5'
J'ai récemment écrit un module appelé keysight qui traduit les événements keypress, keydown et keyup en caractères et en clés, respectivement.
Exemple:
element.addEventListener("keydown", function(event) {
var character = keysight(event).char
})
Je sais que la question est ancienne, mais je l’ai trouvée aujourd’hui à la recherche d’une solution préemballée à ce problème, sans rien trouver qui réponde réellement à mes besoins.
Voici une solution (en anglais uniquement) qui prend en charge correctement les majuscules (minuscules), les minuscules, la ponctuation, le clavier numérique, etc.
Il permet également une identification simple et directe des touches non imprimables, telles que ESC, Flèches directionnelles, Touches de fonction, etc., et leur réaction.
https://jsfiddle.net/5hhu896g/1/
keyboardCharMap and keyboardNameMap are the key to making this work
Merci à DaveAlger de m'avoir épargné quelques fautes de frappe et beaucoup de découverte! - en fournissant le tableau de clés nommées.