web-dev-qa-db-de.com

Ruft den Zeichenwert von KeyCode in JavaScript ab und schneidet ihn dann ab

Das habe ich jetzt:

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

Wenn der e.keyCode möglicherweise kein ASCII -Zeichen ist (Altbackspacedelarrows, etc.) ... Ich müsste jetzt trim diese Werte aus value irgendwie (vorzugsweise programmgesteuert - nicht mit Nachschlagetabellen).

Ich benutze jQuery.

Ich muss das Ereignis keydown verwenden. keyPress wird für bestimmte zu erfassende Schlüssel nicht aktiviert (Escdelbackspace, usw.).

Ich kann setTimeout nicht verwenden, um den Wert der Eingabe abzurufen. setTimeout(function(){},0) ist zu langsam.

142
David Murdoch

Vielleicht habe ich die Frage nicht richtig verstanden, aber können Sie nicht keyup verwenden, wenn Sie beide Eingänge erfassen möchten?

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

Nach meiner Erfahrung ist String.fromCharCode(e.keyCode) unzuverlässig. String.fromCharCode erwartet Unicode-Zeichencodes als Argument. e.keyCode gibt Javascript-Schlüsselcodes zurück. Javascript-Schlüsselcodes und Unicode-Zeichencodes sind nicht ​​dasselbe! Insbesondere geben die Zifferntasten ein anderes keycode als die normalen Zifferntasten zurück (da sie unterschiedliche Tasten sind), während dasselbe keycode für beide Buchstaben upper und lowercase zurückgegeben wird (Sie haben in beiden Fällen die gleiche Taste gedrückt), obwohl sie unterschiedliche charcodes haben. .

Beispielsweise generiert die normale Zifferntaste 1 ein Ereignis mit keycode 49, während die Zifferntaste 1 (mit Numlock on) generiert keycode 97. In Verbindung mit String.fromCharCode erhalten wir Folgendes:

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

String.fromCharCode erwartet Unicode-Zeichencodes, keine Javascript-Schlüsselcodes. Der Schlüssel a generiert ein Ereignis mit dem Wert keycode von 65, unabhängig vom Fall des zu generierenden Zeichens (es gibt auch einen Modifikator für den Fall, dass Shift Taste gedrückt wird, etc. im Ereignis). Der Charakter a hat einen Unicode charcode von 61 während der Charakter A hat eine charcode von 41 (zum Beispiel nach http://www.utf8-chartable.de/ ). Dies sind jedoch hex-Werte. Die Konvertierung in eine Dezimalzahl ergibt einen charcode-Wert von 65 für "A" und 97 für "a". [1] Dies stimmt mit dem überein, was wir von String.fromCharCode für diese Werte erhalten.

Meine eigenen Anforderungen beschränkten sich darauf, Zahlen und gewöhnliche Buchstaben zu verarbeiten (je nach Position in der Zeichenfolge zu akzeptieren oder abzulehnen) und Steuerzeichen zuzulassen (F-Schlüssel, Ctrl-etwas) durch. Auf diese Weise kann ich nach Steuerzeichen suchen. Wenn es sich nicht um ein Steuerzeichen handelt, prüfe ich anhand eines Bereichs, und erst dann muss ich das tatsächliche Zeichen abrufen. Da ich mir keine Sorgen um die Schreibweise mache (ich ohnehin alle Buchstaben in Großbuchstaben ändern) und den Bereich der Tastencodes bereits eingeschränkt habe, muss ich mich nur um die Zifferntasten kümmern. Dafür reicht folgendes aus:

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

Im Allgemeinen wäre eine Funktion zum zuverlässigen Zurückgeben des Zeichens aus einem charcode großartig (möglicherweise als jQuery-Plugin), aber ich habe gerade keine Zeit, sie zu schreiben. Es tut uns leid.

Ich würde auch e.which erwähnen (wenn Sie jQuery verwenden), wodurch e.keyCode und e.charCode normalisiert werden, sodass Sie sich keine Gedanken darüber machen müssen, welche Art von Taste gedrückt wurde. Das Problem bei der Kombination mit String.fromCharCode bleibt bestehen.

Ich war eine Weile verwirrt. Alle Dokumente besagen, dass String.fromCharCode einen Unicode charcode erwartet, während es in der Praxis für ASCII Zeichencodes zu funktionieren schien.ASCII Zeichencodes und Unicode-Dezimalzeichencodes überlappen sich für normale lateinische Buchstaben.

183
Adam

Durch Schlüsselcode indizierte lesbare Schlüsselnamen

Es gibt relativ wenige Schlüsselcodes, so dass ich einfach alle entsprechenden Werte in einem statischen Array auflistete, sodass ich einfach die Zahl 65 in A mithilfe von keyboardMap[65] konvertieren kann.

Nicht alle Tastencodes werden einem druckbaren Zeichen zugeordnet, daher wird eine andere identifizierbare Zeichenfolge zurückgegeben.

Sie müssen das Array möglicherweise an Ihre Anforderungen anpassen und können einfach leere Zeichenfolgen für alle Zeichen zurückgeben, die Sie nicht übersetzen möchten. Mit dem folgenden Array kann ich schnell und zuverlässig feststellen, welche Taste in einer beliebigen Umgebung gedrückt wurde. Genießen!

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

Hinweis: Die Position der einzelnen Werte im obigen Array ist wichtig. Die "" sind Platzhalter für Codes mit unbekannten Werten.

Versuchen Sie das folgende Code-Snippet mit diesem statischen Array-Lookup-Ansatz ...

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>


Wichtige Schlüsselcodes

Buchstaben A-Z: (65-90)

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

Ziffern 0-9: (48-57)

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

Nummernblock 0-9: (96-105)

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

Pfeiltasten: (37-40)

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

Tabulatortaste: (9)

keyboardMap[9];  // TAB

Eingabetaste: (13)

keyboardMap[13];  // ENTER

Leertaste: (32)

keyboardMap[32];  // SPACE

Betriebssystemspezifische Taste (91) Windows-Taste (Windows) oder Befehlstaste (Mac)

keyboardMap[91];  // OS_KEY

Alt-Taste: (18)

keyboardMap[18];  // ALT

Steuerschlüssel: (17)

keyboardMap[17];  // CONTROL

Umschalttaste: (16)

keyboardMap[16];  // SHIFT

Feststelltaste: (20)

keyboardMap[20];  // CAPS_LOCK
72
DaveAlger

Nur ein wichtiger Hinweis: Die oben akzeptierte Antwort funktioniert für keyCode> = 144 nicht richtig, d. H. Punkt, Komma, Bindestrich usw. Für diese sollte ein allgemeinerer Algorithmus verwendet werden:

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

Wenn Sie neugierig sind, warum, ist dies anscheinend aufgrund des Verhaltens der integrierten JS-Funktion String.fromCharCode() erforderlich. Für Werte von keyCode <= 96 Scheint die Zuordnung mit der Funktion zu erfolgen:

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

Für Werte von keyCode > 96 Scheint die Zuordnung mit der Funktion zu erfolgen:

chrCode = keyCode

Wenn das seltsam erscheint, stimme ich zu. Leider wäre es weit entfernt von dem Seltsamsten, was ich im JS-Kern gesehen habe.

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"/>
13
galarant

Ich gehe davon aus, dass dies für ein Spiel oder für eine schnell reagierende Art von Anwendung ist, daher die Verwendung von KEYDOWN als KEYPRESS.

Edit: Dang! Ich stehe korrigiert (danke Crescent Fresh und David): JQuery (oder sogar die zugrunde liegenden DOM-Hosts) machen nicht das Detail von WM_KEYDOWN und anderen Ereignissen sichtbar. Diese Daten werden vorab verdaut, und im Fall von keyDown sogar in JQuery erhalten wir:

Beachten Sie, dass diese Eigenschaften die UniCode-Werte sind.
Hinweis: Ich konnte in JQuery-Dokumenten keinen autoritativen Verweis darauf finden, aber viele seriöse Beispiele im Internet beziehen sich auf diese beiden Eigenschaften.

Der folgende Code, der von etwas Java (nicht Javascript) von mir angepasst wurde, ist daher völlig falsch ...

Im Folgenden erhalten Sie die "interessanten" Teile des Schlüsselcodes:

  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
2
mjv

Für diejenigen von Ihnen, die hierher gekommen sind, um die tatsächlichen Unicode-Zeichenwerte für einen Schlüsselcode zu suchen, wie ich es tat, ist hier eine Funktion dafür. Bei Angabe des Rechtspfeils mit dem Unicode-Schlüsselcode wird beispielsweise die sichtbare Zeichenfolge \u001B\u005B\u0043 ausgegeben.

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

Sie können auch die schreibgeschützte Eigenschaft keyNAME _ verwenden. Es respektiert auch spezielle Tasten wie shift etc. und wird vom IE9 unterstützt.

Wenn ein nicht druckbares Zeichen oder ein Sonderzeichen gedrückt wird, ist der Wert eines der definierten Schlüsselwerte wie 'Shift' oder 'Multiply'.

  • Tastatur event.key
  • X -> 'x'
  • Shift+X -> 'X'
  • F5-> 'F5'
0
Kim Kern

Ich habe kürzlich ein Modul namens keysight geschrieben, das keypress-, keydown- und keyup-Ereignisse in Zeichen bzw. Schlüssel übersetzt. 

Beispiel: 

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

Ich weiß, dass dies eine alte Frage ist, aber ich bin heute auf die Suche nach einer vorgefertigten Lösung für dieses Problem gestoßen und habe nichts gefunden, was meinen Bedürfnissen wirklich entsprach. 

Hier ist eine Lösung (nur Englisch), die korrekt Großbuchstaben (verschoben), Kleinbuchstaben, Satzzeichen, Zifferntasten usw. unterstützt.

Es ermöglicht auch die einfache und unkomplizierte Identifizierung von und nicht-druckbaren Tasten wie ESC, Pfeile, Funktionstasten usw.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Vielen Dank an DaveAlger, dass Sie mir das Tippen erspart haben - und viel Entdeckung! - durch Bereitstellung des Named Key Arrays.

0
BRebey