Oto, co mam teraz:

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

Jeśli e.keyCodenie może być znaków ASCII ( Alt, backspace, del, arrows., Etc) ... I teraz trzeba by trimtych wartości ze valuejakoś (najlepiej programowo - nie z tabel odnośników).

Używam jQuery.

Muszę skorzystać z keydownwydarzenia. keyPressnie aktywuje dla niektórych klawiszy muszę wychwytywania ( Esc, del, backspace, itd.).

Nie mogę użyć setTimeoutdo uzyskania wartości danych wejściowych. setTimeout(function(){},0)jest zbyt wolny.

Może nie zrozumiałem poprawnie pytania, ale czy nie możesz użyć, keyupjeśli chcesz uchwycić oba wejścia?

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

Z mojego doświadczenia nie String.fromCharCode(e.keyCode)można polegać. String.fromCharCodeoczekuje znaków Unicode jako argumentu; e.keyCodezwraca kody kluczy javascript. Kody klawiszy JavaScript i kody znaków Unicode to nie to samo! W szczególności klawisze numeryczne zwracają coś innego keycodeniż zwykłe klawisze numeryczne (ponieważ są to różne klawisze), podczas gdy to samo keycodejest zwracane dla obu upperi lowercaseliter (nacisnąłeś ten sam klawisz w obu przypadkach), mimo że mają różne charcodes.

Na przykład zwykły klawisz numeryczny 1 generuje zdarzenie z keycode49, podczas gdy klawisz numeryczny 1 (z Numlockwłączonym) generuje keycode97. Użyty razem z String.fromCharCodeotrzymujemy:

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

String.fromCharCodeoczekuje kodów znaków Unicode, a nie kodów javascript. Klawisz ageneruje zdarzenie z keycodewartością 65, niezależnie od wielkości litery, jaką by wygenerował (jest też modyfikator dla tego, czy Shiftklawisz jest wciśnięty, itp. W zdarzeniu). Znak ama unicode charcodez 61, podczas gdy postać Ama charcode41 (w zależności, na przykład, http://www.utf8-chartable.de/ ). Są to jednak hexwartości, po przeliczeniu na dziesiętne otrzymujemy charcode65 dla „A” i 97 dla „a”. [1] Jest to zgodne z tym, z czego otrzymujemy String.fromCharCodete wartości.

Moje własne wymaganie ograniczało się do przetwarzania liczb i zwykłych liter (akceptowanie lub odrzucanie w zależności od pozycji w ciągu) i przepuszczanie znaków sterujących ( F-klucze, -coś Ctrl). W ten sposób mogę sprawdzić znaki kontrolne, jeśli nie jest to znak kontrolny, sprawdzam zakres i dopiero wtedy muszę uzyskać właściwy znak. Biorąc pod uwagę, że nie martwię się wielkością liter (i tak zmieniam wszystkie litery na duże) i już ograniczyłem zakres kodów, muszę się tylko martwić o klawisze numeryczne. Do tego wystarczą:

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

Mówiąc bardziej ogólnie, funkcja niezawodnego zwracania znaku z a charcodebyłaby świetna (może jako wtyczka jQuery), ale nie mam czasu, aby ją teraz napisać. Przepraszam.

Wspomniałbym również e.which(jeśli używasz jQuery), który normalizuje e.keyCodei e.charCode, abyś nie musiał się martwić o to, jaki klawisz został naciśnięty. Problem z połączeniem go z String.fromCharCoderesztkami.

[1] Przez chwilę byłem zdezorientowany -. wszyscy doktorzy mówią, że String.fromCharCodeoczekuje Unicode charcode, podczas gdy w praktyce wydawało się, że działa dla znaków ASCII, ale myślę, że było to spowodowane koniecznością konwersji na dziesiętne z szesnastkowego, w połączeniu z faktem, że znaki ASCII i dziesiętne znaki Unicode nakładają się na zwykłe litery łacińskie.

Czytelne nazwy kluczy indeksowane według kodu klucza

Istnieje stosunkowo niewiele kodów kluczy, więc po prostu wymieniłem wszystkie odpowiadające im wartości w tablicy statycznej, aby po prostu przekonwertować liczbę 65na AużyciekeyboardMap[65]

Nie wszystkie kody klucza są odwzorowywane na znak drukowalny, więc zwracany jest inny możliwy do zidentyfikowania ciąg.

Być może będziesz musiał zmodyfikować tablicę, aby odpowiadała twoim potrzebom i możesz po prostu zwrócić puste ciągi dla wszystkich znaków, których nie chcesz tłumaczyć. Poniższa tablica pozwala mi szybko i niezawodnie określić, który klawisz został naciśnięty w dowolnym środowisku. Cieszyć się!

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

Uwaga: ważna jest pozycja każdej wartości w powyższej tablicy. Są ""to symbole zastępcze dla kodów z nieznanymi wartościami.

Wypróbuj następujący fragment kodu, korzystając z tego statycznego podejścia do wyszukiwania tablic ...

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>

Kluczowe kody, na które warto zwrócić uwagę

Litery AZ: (65-90)

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

Cyfry 0-9: (48-57)

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

Klawiatura numeryczna 0-9: (96-105)

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

Klawisze strzałek: (37-40)

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

Klawisz Tab: (9)

keyboardMap[9];  // TAB

Wprowadź klucz: (13)

keyboardMap[13];  // ENTER

Klawisz spacji: (32)

keyboardMap[32];  // SPACE

Klucz specyficzny dla systemu operacyjnego (91) Klawisz Windows (Windows) lub klawisz Command (Mac)

keyboardMap[91];  // OS_KEY

Klawisz Alt: (18)

keyboardMap[18];  // ALT

Klawisz sterujący: (17)

keyboardMap[17];  // CONTROL

Klawisz Shift: (16)

keyboardMap[16];  // SHIFT

Klawisz Caps Lock: (20)

keyboardMap[20];  // CAPS_LOCK

Ważna uwaga: zaakceptowana powyżej odpowiedź nie będzie działać poprawnie dla keyCode> = 144, tj. Kropka, przecinek, myślnik itp. Dla tych, którzy powinniście użyć bardziej ogólnego algorytmu:

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

Jeśli ciekawi Cię dlaczego, jest to najwyraźniej konieczne ze względu na zachowanie wbudowanej funkcji JS String.fromCharCode(). keyCode <= 96Wydaje się, że dla jego wartości można mapować za pomocą funkcji:

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

keyCode > 96Wydaje się, że dla jego wartości można mapować za pomocą funkcji:

chrCode = keyCode

Jeśli wydaje się to dziwne zachowanie, to cóż… Zgadzam się. Niestety, byłoby to bardzo dalekie od najdziwniejszej rzeczy, jaką widziałem w rdzeniu 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"/>

Zakładam, że dotyczy to gry lub aplikacji szybko reagujących, stąd użycie KEYDOWN niż KEYPRESS.

Edycja : Cholera! Stoję poprawione (dziękuję Crescent Fresh i Davidowi): JQuery (a raczej bazowe hosty DOM) nie ujawniają szczegółów WM_KEYDOWN i innych zdarzeń. Raczej wstępnie przetrawiają te dane, aw przypadku keyDown nawet w JQuery otrzymujemy:

• event.keyCode dla kluczy niebędących znakami
• event.charCode dla kluczy znaków

Zauważ, że te właściwości są wartościami UniCode.
Uwaga, nie mogłem znaleźć autorytatywnego odniesienia do tego w dokumentach JQuery, ale wiele renomowanych przykładów w sieci odnosi się do tych dwóch właściwości.

Poniższy kod, zaadaptowany z mojego java (nie javascript), jest zatem całkowicie błędny ...

Poniżej znajdziesz „interesujące” części kodu:

  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

Wiem, że to stare pytanie, ale natknąłem się na nie dzisiaj, szukając gotowego rozwiązania tego problemu, i nie znalazłem nic, co naprawdę odpowiadałoby moim potrzebom.

Oto rozwiązanie (tylko w języku angielskim), które poprawnie obsługuje wielkie litery (przesunięte), małe litery, znaki interpunkcyjne, klawiaturę numeryczną itp.

Pozwala również na prostą i bezpośrednią identyfikację - i reakcję na - niedrukowalne klawisze, takie jak ESC, strzałki, klawisze funkcyjne itp.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Dziękuję DaveAlgerowi za zaoszczędzenie mi trochę pisania - i wiele odkryć! - dostarczając tablicę nazwanych kluczy.

Niedawno napisałem w moduł keysight który tłumaczy keypress, keydownoraz keyupwydarzenia na znaki i klucze odpowiednio.

Przykład:

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

Dla tych z Was, którzy przybyli tutaj, szukając rzeczywistych wartości znaków Unicode dla kodu klucza, tak jak ja, oto funkcja do tego. Na przykład, biorąc pod uwagę kod unicode ze strzałką w prawo, zwróci to widoczny ciąg\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;
}

Możesz również użyć właściwości tylko do odczytu key. Szanuje również klawisze specjalne, takie jakshift itp. I jest obsługiwany przez IE9.

Po naciśnięciu niedrukowalnego lub specjalnego znaku, wartość będzie jedną ze zdefiniowanych wartości klucza, takich jak 'Shift'lub 'Multiply'.

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

Skorzystaj z tego linku Uzyskaj kod klucza z naciśnięcia klawisza i wartości znaku dla dowolnego kodu klucza

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