152

Inilah yang saya miliki sekarang:

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

Jika e.keyCodetidak mungkin karakter ASCII ( Alt, backspace, del, arrows., Dll) ... Saya akan sekarang perlu untuk trimnilai-nilai ini dari valueentah bagaimana (sebaiknya pemrograman - tidak dengan tabel lookup).

Saya menggunakan jQuery.

Saya harus menggunakan keydownacara tersebut. keyPresstidak mengaktifkan untuk kunci tertentu saya harus capture ( Esc, del, backspace, dll).

Saya tidak bisa menggunakan setTimeoutuntuk mendapatkan nilai input. setTimeout(function(){},0)terlalu lambat.

— David Murdoch
sumber

11

Anda harus menggunakan keydownuntuk mengambil kode karakter? Anda berada dalam perjalanan yang sulit: quirksmode.org/js/keys.html (petunjuk: gunakan keypress!! )

— Crescent Fresh

1

Kasus karakter tidak masalah. Dan saya perlu menangkap atas, bawah, kiri, kanan, esc, del, backspace untuk setidaknya FF dan IE; jadi penekanan tombol tidak ada pertanyaan. Terima kasih atas petunjuknya. :-)

— David Murdoch

Menanggapi masalah ini, saya baru saja menulis sebuah plugin jQuery: github.com/bpeacock/key-to-charCode Agak turun dan kotor dan bisa lebih baik diintegrasikan ke dalam jQuery, tapi ini awal.

— Brian Peacock

1

Bagi siapa pun yang datang ke sini mencoba menyelesaikan masalah KeyCode tetapi benar-benar hanya ingin melihat kunci apa yang ditekan, lihat jawaban ini . TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }

— user1717828

164

Mungkin saya tidak mengerti pertanyaan dengan benar, tetapi tidak bisakah Anda menggunakan keyupjika Anda ingin menangkap kedua input?

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

— David Hellsing
sumber

10

Itu tidak berfungsi dengan lokal lain yang berada di luar kisaran ASCII (seperti latin-1 misalnya, Jerman, Perancis, Italia dan Spanyol jika Anda harus tahu). Juga gagal untuk kunci yang tidak dapat dicetak, jelas.

— Florian Bösch

9

Ini juga gagal ketika menggunakan angka pada tombol angka, e.keyCode bukan kode ASCII (atau bahkan UTF-x).

— Tom Chiverton

2

Jawaban buruk, itu bahkan tidak bekerja dengan karakter dasar. Kode titik koma, misalnya, adalah 186, jalankan String.fromCharCode () di atasnya dan Anda akan mendapatkan sampah. Masalahnya adalah keyCode tidak sesuai dengan ASCII untuk semua karakter. Karakter ASCII untuk titik koma adalah 59. Masalah yang sama berlaku untuk setiap karakter khusus, keyCode TIDAK mengembalikan kode yang tepat untuk String.fromCharCode ().

— Alexander Tsepkov

193

Dalam pengalaman saya String.fromCharCode(e.keyCode)tidak bisa diandalkan. String.fromCharCodemengharapkan kode kode unicode sebagai argumen; e.keyCodemengembalikan kode kunci javascript. Kode kunci Javascript dan kode unicode bukan hal yang sama! Secara khusus, tombol-tombol angka mengembalikan berbeda keycodedari tombol-tombol angka biasa (karena mereka adalah kunci yang berbeda) sementara yang sama keycodedikembalikan untuk keduanya upperdan lowercasehuruf (Anda menekan tombol yang sama dalam kedua kasus), meskipun mereka memiliki berbeda charcodes.

Misalnya, tombol angka 1 biasa menghasilkan suatu peristiwa dengan keycode49 sementara tombol angka 1 (dengan Numlockon) menghasilkan keycode97. Digunakan dengan String.fromCharCodekita mendapatkan yang berikut:

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

String.fromCharCodemengharapkan kode sandi unicode, bukan kode kunci javascript. Kunci tersebut amenghasilkan suatu peristiwa dengan keycode65, independen dari kasus karakter yang akan dihasilkan (ada juga pengubah untuk jika Shifttombol ditekan, dll. Dalam acara tersebut). Karakter amemiliki charcodekode unicode 61 sedangkan karakter Amemiliki kode charcode41 (sesuai dengan, misalnya, http://www.utf8-chartable.de/ ). Namun, itu adalah hexnilai, yang dikonversi ke desimal memberi kita nilai charcode65 untuk "A" dan 97 untuk "a". [1] Ini konsisten dengan apa yang kami dapatkan dari String.fromCharCodenilai-nilai ini.

Persyaratan saya sendiri terbatas pada pemrosesan angka dan huruf biasa (menerima atau menolak tergantung pada posisi dalam string) dan membiarkan karakter kontrol ( F-keys, -something Ctrl) melalui. Dengan demikian saya dapat memeriksa karakter kontrol, jika itu bukan karakter kontrol saya memeriksa terhadap suatu rentang dan hanya kemudian saya perlu mendapatkan karakter yang sebenarnya. Mengingat saya tidak khawatir tentang kasus (saya mengubah semua huruf menjadi huruf besar) dan telah membatasi jangkauan kode kunci, saya hanya perlu khawatir tentang tombol angka pad. Berikut ini cukup untuk itu:

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

Secara umum, fungsi untuk mengembalikan karakter dari andal charcodeakan sangat bagus (mungkin sebagai plugin jQuery), tapi saya tidak punya waktu untuk menulisnya sekarang. Maaf.

Saya juga menyebutkan e.which(jika Anda menggunakan jQuery) yang menjadi normal e.keyCodedan e.charCode, sehingga Anda tidak perlu khawatir tentang jenis tombol apa yang ditekan. Masalah dengan menggabungkannya dengan String.fromCharCodesisa - sisa.

[1] Saya bingung sebentar -. semua dokumen mengatakan bahwa String.fromCharCodemengharapkan unicode charcode, sementara dalam praktiknya tampaknya berfungsi untuk kode karakter ASCII, tapi itu saya pikir karena kebutuhan untuk mengkonversi ke desimal dari hex, dikombinasikan dengan fakta bahwa kode ASCII dan kode unimal decode tumpang tindih untuk biasa huruf latin.

— Adam
sumber

2

Komentar ini cukup mengganggu semua masalah saya. Sungguh menakjubkan bagi saya bahwa jQuery belum menerapkan "fromKeyCode" yang setara dengan "String.fromCharCode" javascript

— Chris J

27

Tampaknya acara KeyPress melakukan ini. Lihat stackoverflow.com/a/9350415/209568 . Dari dokumen jQuery "Perhatikan bahwa keydown dan keyup memberikan kode yang menunjukkan tombol mana yang ditekan, sedangkan penekanan tombol menunjukkan karakter mana yang dimasukkan. Misalnya, huruf kecil" a "akan dilaporkan sebagai 65 oleh keydown dan keyup, tetapi sebagai 97 oleh penekanan tombol Huruf besar "A" dilaporkan sebagai 65 oleh semua peristiwa. Karena perbedaan ini, ketika menangkap penekanan tombol khusus seperti tombol panah, .keydown () atau .keyup () adalah pilihan yang lebih baik. "

— Adam

Ini paling tidak menyenangkan bagi kita yang kecanduan keydown.

— Isaac Bolinger

Catatan tentang bit terakhir tentang ASCII dan Unicode. Unicode memiliki semua 128 karakter ASCII di tempat yang sama. Ini disengaja agar setiap file yang awalnya disandikan sebagai ASCII dapat menyamar sebagai (dan dikonversi menjadi) Unicode tanpa perlu kerja. Karakter ASCII yang diperluas tidak ada di tempat yang sama, jadi jika Anda menggunakan karakter tersebut Anda kurang beruntung.

— DanielM

1

Intinya keyCodeadalah untuk mengetahui tombol apa yang ditekan, bukan untuk mengetahui karakter apa yang digunakan. Misalnya, "U" pada keyboard Dvorak memiliki kode kunci yang sama dengan "F" pada keyboard QWERTY atau "ㄹ" pada keyboard Korea dll. Intinya bukan untuk mengubahnya menjadi karakter, itu ada di sana sehingga Anda dapat dengan mudah memetakan hal-hal ke posisi keyboard.

— Vincent McNabb

77

Nama kunci yang dapat dibaca yang diindeks oleh kode kunci

Ada kode kunci yang relatif sedikit jadi saya hanya mendaftar semua nilai yang sesuai dalam array statis sehingga saya bisa dengan mudah mengkonversi angka 65menjadi AmenggunakankeyboardMap[65]

Tidak semua kode kunci memetakan ke karakter yang dapat dicetak sehingga beberapa string yang dapat diidentifikasi lainnya dikembalikan.

Anda mungkin perlu memodifikasi array yang sesuai dengan kebutuhan Anda dan cukup mengembalikan string kosong untuk semua karakter yang tidak ingin Anda terjemahkan. Array berikut memungkinkan saya untuk dengan cepat dan andal menentukan tombol mana yang ditekan di lingkungan apa pun. Nikmati!

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

Catatan: Posisi setiap nilai dalam array di atas adalah penting. The ""adalah penampung untuk kode dengan nilai-nilai yang tidak diketahui.

Coba cuplikan kode berikut menggunakan pendekatan pencarian array statis ini ...

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Kode kunci yang perlu diperhatikan

Surat AZ: (65-90)

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

Digit 0-9: (48-57)

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

Angka Pad 0-9: (96-105)

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

Tombol Panah: (37-40)

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

Kunci Tab: (9)

keyboardMap[9];  // TAB

Enter Key: (13)

keyboardMap[13];  // ENTER

Kunci bilah spasi: (32)

keyboardMap[32];  // SPACE

OS Specific Key (91) Windows Key (Windows) atau Command Key (Mac)

keyboardMap[91];  // OS_KEY

Tombol Alt: (18)

keyboardMap[18];  // ALT

Kunci Kontrol: (17)

keyboardMap[17];  // CONTROL

Tombol Shift: (16)

keyboardMap[16];  // SHIFT

Caps Lock Key: (20)

keyboardMap[20];  // CAPS_LOCK

— DaveAlger
sumber

tidak bekerja untuk karakter khusus, jika memasukkan kunci dengan tombol shift, ada solusi?

— Shaik Matheen

14

Hanya sebuah catatan penting: jawaban yang diterima di atas tidak akan berfungsi dengan benar untuk keyCode> = 144, yaitu titik, koma, tanda hubung, dll. Bagi mereka Anda harus menggunakan algoritma yang lebih umum:

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

Jika Anda penasaran mengapa, ini tampaknya perlu karena perilaku fungsi JS bawaan String.fromCharCode(). Untuk nilai-nilai keyCode <= 96itu tampaknya memetakan menggunakan fungsi:

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

Untuk nilai-nilai keyCode > 96itu tampaknya memetakan menggunakan fungsi:

chrCode = keyCode

Jika ini kelihatan seperti perilaku aneh maka saya setuju. Sedihnya, itu akan sangat jauh dari hal paling aneh yang pernah saya lihat di inti 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"/>

Luaskan cuplikan

— banyak
sumber

1

Anda akan membingungkan orang dengan menggunakan letjawaban atas pertanyaan mulai 2009. :-)

— David Murdoch

12

Jika seseorang menemukan ES6 dengan melihat ke atas letmaka saya membantu mereka ;-)

— galarant

@galarant Bisakah Anda jelaskan mengapa / bagaimana ini bekerja?

— Izhar Aazmi

@IzharAazmi menambahkan penjelasan. Semoga ini bisa membantu!

— galarant

1

Ini juga tidak berfungsi dengan benar untuk tombol angka pada keypad numerik (kisi tombol di sebelah kanan keyboard yang diperluas).

— Scott Buchanan

2

Saya berasumsi ini untuk permainan atau untuk jenis aplikasi yang merespons cepat maka penggunaan KEYDOWN daripada KEYPRESS.

Sunting : Sial! Saya berdiri dikoreksi (terima kasih Crescent Fresh dan David): JQuery (atau bahkan lebih tepatnya host DOM yang mendasari) tidak mengekspos detail WM_KEYDOWN dan acara lainnya. Alih-alih mereka mencerna data ini dan, dalam kasus keyDown bahkan di JQuery, kita mendapatkan:

event.keyCode untuk kunci non-karakter
event.charCode untuk kunci karakter

Perhatikan bahwa properti ini adalah nilai UniCode.
Catatan, saya tidak dapat menemukan referensi otoritatif untuk itu dalam dokumen JQuery, tetapi banyak contoh terkemuka di internet merujuk ke dua properti ini.

Kode berikut, diadaptasi dari beberapa java (bukan javascript) milik saya, karena itu sama sekali salah ...

Berikut ini akan memberi Anda bagian-bagian kode kunci yang "menarik":

  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

— mjv
sumber

hm, jangan pergi, scanCode selalu menghasilkan 0. Dan e.KeyCode harus e.keyCode (KeyCode tidak terdefinisi).

— David Murdoch

Hei sekarang ... Halo, tunggu ... apa ?? Kami bicara JScript di sini atau sesuatu?

— Crescent Fresh

@ David M. Buruk saya, mungkin JQuery "pra-intisari" bagian kode ini untuk kita. Saya mencari ke dalamnya sekarang.

— mjv

1

@ mjv: dari mana Anda mendapatkan kode ini? Apakah ini pernah berhasil untuk Anda? AFAIK no implementasi DOM mengkodekan semua info itu ke objek acara ( keydownatau tidak).

— Crescent Fresh

@Crescent: Saya mengadaptasinya dengan cepat dan naif dari beberapa kode java saya, sudah tua pada saat itu ... Pokoknya, Anda benar sekali: tidak ada host DOM yang membagikan peristiwa mentah semacam itu, bahkan untuk keyboard. Saya memperbaiki prosa saya sesuai; masih mencari dokumen resmi tentang masalah ini dari JQuery.com

— mjv

0

Saya tahu ini adalah pertanyaan lama, tetapi saya menemukan hari ini mencari solusi yang sudah dikemas untuk masalah ini, dan tidak menemukan apa pun yang benar-benar memenuhi kebutuhan saya.

Berikut ini adalah solusi (hanya bahasa Inggris) yang mendukung Huruf Besar (bergeser), Huruf Kecil, tanda baca, papan tombol angka, dll.

Hal ini juga memungkinkan untuk identifikasi sederhana dan mudah ke depan - dan reaksi terhadap - kunci yang tidak dapat dicetak, seperti ESC, Arrows, Tombol fungsi, dll.

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

keyboardCharMap and keyboardNameMap are the key to making this work

Terima kasih kepada DaveAlger karena telah menyelamatkan saya mengetik - dan banyak penemuan! - dengan memberikan Named Key Array.

— Brebey
sumber

Biola Anda sangat bagus! Terima kasih telah berbagi. Ini bekerja dengan sangat baik. Saya menggunakannya untuk menerapkan edit multi-kursor gaya Sublime untuk bidang formulir dengan item yang memiliki nilai yang sama

— Todd Hammer

0

Saya baru-baru menulis sebuah modul yang disebut keysight yang menerjemahkan keypress, keydowndan keyupperistiwa menjadi karakter dan kunci masing-masing.

Contoh:

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

— BT
sumber

apakah ini mendukung kunci seperti ñ?

— Arnold Roa

@ArnoldRoa Saya baru saja mendorong sesuatu yang diharapkan akan mendukung karakter seperti itu. Saya tidak memiliki keyboard dengan karakter beraksen, jadi maukah Anda menguji?

— BT

0

Bagi Anda yang datang ke sini mencari nilai karakter Unicode aktual untuk kode kunci, seperti yang saya lakukan, berikut adalah fungsi untuk itu. Misalnya, mengingat panah kanan unicode keycode ini akan menampilkan string yang terlihat\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;
}

— d'Artagnan Evergreen Barbosa
sumber

0

Anda juga dapat menggunakan properti read-only key. Itu juga menghormati kunci khusus seperti shiftdll dan didukung oleh IE9.

Ketika karakter yang tidak dapat dicetak atau karakter khusus ditekan, nilainya akan berada pada nilai kunci yang ditentukan seperti 'Shift'atau 'Multiply'.

Papan ketik event.key
X -> 'x'
Shift+ X ->'X'
F5 -> 'F5'

— Kim Kern
sumber

-2

Lihat tautan ini Dapatkan Kode Kunci dari tombol tekan dan nilai karakter untuk kode kunci apa pun

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

— pengguna2269057
sumber

1

Ini salah! Karena tidak memperhitungkan bahasa saat ini diaktifkan pada keyboard pengguna. Misalnya, saya memasukkan 'ф', tetapi memberi 'a' ...

— Vadim Guzev

ini salah, teks akan berubah sesuai dengan layot keyboard

— Arnold Roa

Dapatkan nilai Karakter dari KeyCode di JavaScript ... lalu trim

Nama kunci yang dapat dibaca yang diindeks oleh kode kunci

Kode kunci yang perlu diperhatikan