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 keycode
différent des clés numériques ordinaires (car elles sont différentes) tandis que le même keycode
est renvoyé pour upper
et lowercase
lettres (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 keycode
49 tandis que la touche du pavé numérique 1 (avec Numlock on) génère keycode
97. 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 keycode
de 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 charcode
de 61 alors que le caractère A a un charcode
de 41 (selon, par exemple, http://www.utf8-chartable.de/ ). Cependant, ce sont des valeurs hex
name__; 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 charcode
serait 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 charcode
name__, 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.
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>
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:
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'
.
event.key
'x'
'X'
'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.