รับค่าตัวละครจาก KeyCode ใน JavaScript ... จากนั้นตัดแต่ง

152

นี่คือสิ่งที่ฉันมีตอนนี้:

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

หากe.keyCodeไม่อาจจะเป็นอักขระ ASCII ( Alt, backspace, del, arrows. ฯลฯ ) ... ฉันจะตอนนี้จำเป็นต้องtrimค่าเหล่านี้จากvalueอย่างใด (โดยเฉพาะโปรแกรม - ไม่ได้อยู่กับตารางการค้นหา)

ฉันใช้ jQuery

ฉันต้องใช้keydownเหตุการณ์ keyPressไม่ได้เปิดใช้งานสำหรับคีย์บางอย่างที่ฉันต้องจับ ( Esc, del, backspaceฯลฯ )

ฉันไม่สามารถใช้setTimeoutเพื่อรับค่าของอินพุต setTimeout(function(){},0)ช้าเกินไป

javascript  jquery  special-characters  keycode 
— เดวิดเมอร์ด็อก
แหล่งที่มา
11
คุณต้องใช้keydownเพื่อจับรหัสตัวอักษร? คุณกำลังจะตกนรก: quirksmode.org/js/keys.html (คำใบ้: ใช้keypress!! )
— Crescent Fresh
1
กรณีของตัวละครนั้นไม่สำคัญ และฉันต้องการจับขึ้น, ลง, ซ้าย, ขวา, esc, del, backspace อย่างน้อย FF และ IE; ดังนั้น keypress จึงเป็นไปไม่ได้ ขอบคุณสำหรับคำใบ้ว่า :-)
— David Murdoch
ในการตอบสนองต่อปัญหานี้ฉันเพิ่งเขียนปลั๊กอิน jQuery: github.com/bpeacock/key-to-charCodeมันบิตลงและสกปรกและอาจรวมเข้ากับ jQuery ได้ดีขึ้น แต่เป็นการเริ่มต้น
— Brian Peacock
1
สำหรับใครก็ตามที่มาที่นี่เพื่อพยายามแก้ไขปัญหา KeyCode แต่จริงๆแล้วต้องการเห็นว่ามีการกดปุ่มใดลองดูคำตอบนี้ TLDR:document.onkeydown = function(e){ console.log('Key: ' + e.key); }
— 1717828

คำตอบ:

164

บางทีฉันอาจไม่เข้าใจคำถามอย่างถูกต้อง แต่คุณไม่สามารถใช้keyupถ้าคุณต้องการจับภาพอินพุตทั้งสองหรือไม่

$("input").bind("keyup",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
});
— David Hellsing
แหล่งที่มา
10
ไม่สามารถใช้งานได้กับสถานที่อื่นที่อยู่นอกช่วง ASCII (เช่นละติน -1 เช่นเยอรมันฝรั่งเศสฝรั่งเศสอิตาลีและสเปนหากคุณจำเป็นต้องรู้) นอกจากนี้ยังล้มเหลวสำหรับปุ่มที่ไม่สามารถพิมพ์ได้อย่างเห็นได้ชัด
— Florian Bösch
9
สิ่งนี้จะล้มเหลวเมื่อใช้ตัวเลขบนแป้นตัวเลข e.keyCode ไม่ใช่รหัส ASCII (หรือแม้แต่ UTF-x)
— Tom Chiverton
2
คำตอบที่ไม่ถูกต้องมันไม่ได้ทำงานกับตัวละครพื้นฐาน ตัวอย่างเช่นเซมิโคลอน keyCode คือ 186 ให้รัน String.fromCharCode () บนมันและคุณจะได้รับขยะ ปัญหาคือ keyCode ไม่สอดคล้องกับ ASCII สำหรับตัวละครทั้งหมด อักขระ ASCII สำหรับเซมิโคลอนคือ 59 ปัญหาเดียวกันนี้เป็นจริงของอักขระพิเศษทุกตัว keyCode ไม่ส่งคืนรหัสที่ถูกต้องสำหรับ String.fromCharCode ()
— Alexander Tsepkov
193

จากประสบการณ์ของฉันString.fromCharCode(e.keyCode)ไม่น่าเชื่อถือ String.fromCharCodeคาดว่าอักขระ Unicode เป็นอาร์กิวเมนต์ e.keyCodeส่งคืนรหัสจาวาสคริปต์ รหัส Javascript และอักขระรหัส Unicode ไม่เหมือนกัน! โดยเฉพาะอย่างยิ่งปุ่มตัวเลขจะกลับมาแตกต่างkeycodeจากปุ่มตัวเลขทั่วไป (เนื่องจากเป็นปุ่มที่แตกต่างกัน) ในขณะที่keycodeทั้งสองupperและlowercaseตัวอักษรกลับมาเหมือนกัน(คุณกดปุ่มเดียวกันทั้งสองกรณี) แม้ว่าจะมีความแตกต่างกันcharcodesก็ตาม

ตัวอย่างเช่นคีย์ตัวเลขสามัญ 1 สร้างกิจกรรมที่มีkeycode49 ขณะที่ปุ่มตัวเลข1 ( Numlockเปิด) สร้างkeycode97 ใช้กับString.fromCharCodeเราได้รับต่อไปนี้:

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

String.fromCharCodeคาดว่ายูนิโค้ด charcodes ไม่ใช่จาวาสคริปต์ keycodes กุญแจaสร้างเหตุการณ์ที่มีkeycode65 ซึ่งเป็นอิสระจากกรณีของตัวละครที่จะสร้าง (นอกจากนี้ยังมีการปรับเปลี่ยนสำหรับถ้าShiftกดปุ่ม ฯลฯ ในเหตุการณ์) อักขระaมียูนิโค้ดcharcode61 ขณะที่อักขระAมีcharcode41 (ตามตัวอย่างเช่นhttp://www.utf8-chartable.de/ ) อย่างไรก็ตามhexค่าเหล่านี้คือค่าการแปลงเป็นทศนิยมทำให้เรามีค่าcharcode65 สำหรับ "A" และ 97 สำหรับ "a" [1] สิ่งนี้สอดคล้องกับสิ่งที่เราได้รับจากString.fromCharCodeคุณค่าเหล่านี้

ความต้องการของฉันนั้น จำกัด อยู่ที่การประมวลผลตัวเลขและตัวอักษรทั่วไป (การยอมรับหรือการปฏิเสธขึ้นอยู่กับตำแหน่งในสตริง) และการอนุญาตให้ใช้อักขระควบคุม ( F-keys, -something Ctrl) ผ่าน ดังนั้นฉันสามารถตรวจสอบอักขระควบคุมได้ถ้าไม่ใช่อักขระควบคุมที่ฉันตรวจสอบกับช่วงและจากนั้นฉันต้องได้รับอักขระจริงหรือไม่ เนื่องจากฉันไม่ได้กังวลเกี่ยวกับตัวพิมพ์เล็ก (ฉันเปลี่ยนตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่ต่อไป) และมีการ จำกัด ช่วงของรหัสคีย์ไว้แล้วฉันจึงต้องกังวลกับแป้นตัวเลขเท่านั้น ความพอเพียงต่อไปนี้:

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

โดยทั่วไปแล้วฟังก์ชั่นที่จะส่งคืนตัวละครจาก a charcodeน่าจะดี (อาจจะเป็นปลั๊กอิน jQuery) แต่ฉันไม่มีเวลาเขียนตอนนี้ ขอโทษ

ฉันยังพูดถึงe.which(ถ้าคุณใช้ jQuery) ซึ่งเป็นมาตรฐานe.keyCodeและe.charCodeเพื่อให้คุณไม่ต้องกังวลเกี่ยวกับการกดคีย์ประเภทใด ปัญหาเกี่ยวกับการรวมกับString.fromCharCodeซาก

[1] ฉันสับสนในขณะที่ - เอกสารทั้งหมดบอกว่าString.fromCharCodeคาดว่ายูนิโค้ดcharcodeในขณะที่ในทางปฏิบัติมันดูเหมือนจะทำงานสำหรับ ASCII charcodes แต่นั่นเป็นเพราะฉันคิดว่าจำเป็นต้องแปลงเป็นทศนิยมจากฐานสิบหกบวกกับความจริงที่ว่า ASCII charcodes และอักขระทศนิยมทศนิยม Unicode ทับซ้อนกันสำหรับสามัญ ตัวอักษรละติน

— อาดัม
แหล่งที่มา
2
ความคิดเห็นนี้สวยมากทุกปัญหาของฉัน เป็นที่น่าอัศจรรย์สำหรับฉันที่ jQuery ไม่ได้ใช้ "fromKeyCode" เทียบเท่ากับ "String.fromCharCode" ของ javascript
— Chris J
27
ดูเหมือนว่าเหตุการณ์ KeyPress จะทำเช่นนี้ ดูstackoverflow.com/a/9350415/209568 จากเอกสาร jQuery "โปรดทราบว่าการกดคีย์และคีย์อัปเกรดเป็นรหัสที่ระบุว่ากดคีย์ใดขณะที่การกดปุ่มระบุว่าอักขระใดถูกป้อนตัวอย่างเช่นตัวพิมพ์เล็ก" a "จะถูกรายงานเป็น 65 โดยการกดคีย์และการกดคีย์ . ตัวพิมพ์ใหญ่ "A" ถูกรายงานว่า 65 โดยเหตุการณ์ทั้งหมดเนื่องจากความแตกต่างนี้เมื่อจับการกดแป้นพิเศษเช่นปุ่มลูกศร, .keydown () หรือ .keyup () เป็นตัวเลือกที่ดีกว่า "
— Adam
นี่เป็นสิ่งที่ไม่พึงประสงค์มากที่สุดสำหรับพวกเราที่ติดคีออส
— Isaac Bolinger
หมายเหตุเกี่ยวกับบิตสุดท้ายเกี่ยวกับ ASCII และ Unicode Unicode มีอักขระ ASCII 128 ตัวในที่เดียวกัน นี่เป็นเจตนาเพื่อให้ไฟล์ใด ๆ ที่เข้ารหัสเป็น ASCII สามารถปลอมแปลงเป็น (และถูกแปลงเป็น) Unicode โดยไม่จำเป็นต้องทำงาน อักขระ ASCII ที่ขยายเพิ่มนั้นไม่ได้อยู่ในที่เดียวกันดังนั้นหากคุณใช้อักขระเหล่านั้นคุณจะไม่โชคดี
— DanielM
1
จุดสำคัญkeyCodeคือการรู้ว่ามีการกดปุ่มใดไม่ทราบว่าจะใช้อักขระใด ตัวอย่างเช่น "U" บนแป้นพิมพ์ Dvorak มีรหัสเดียวกันกับ "F" บนแป้นพิมพ์ QWERTY หรือ "ㄹ" บนแป้นพิมพ์ภาษาเกาหลีเป็นต้นจุดนี้ไม่สามารถแปลงเป็นอักขระได้ดังนั้นคุณจึงสามารถ แมปสิ่งต่าง ๆ กับตำแหน่งคีย์บอร์ดได้อย่างง่ายดาย
— Vincent McNabb
77

ชื่อคีย์ที่อ่านได้จัดทำดัชนีโดยรหัสคีย์

มีรหัสคีย์ค่อนข้างน้อยดังนั้นฉันจึงแสดงรายการค่าที่สอดคล้องกันทั้งหมดในอาร์เรย์แบบสแตติกดังนั้นฉันสามารถแปลงตัวเลข65เป็นการAใช้keyboardMap[65]

ไม่ใช่รหัสคีย์ทั้งหมดที่จับคู่กับอักขระที่พิมพ์ได้ดังนั้นสตริงที่ระบุตัวตนอื่น ๆ จะถูกส่งกลับ

คุณอาจต้องแก้ไขอาเรย์เพื่อให้เหมาะกับความต้องการของคุณและสามารถส่งคืนสตริงว่างสำหรับอักขระทั้งหมดที่คุณไม่ต้องการแปล อาเรย์ต่อไปนี้ช่วยให้ฉันสามารถระบุได้อย่างรวดเร็วและเชื่อถือได้ว่ากดคีย์ใดในสภาพแวดล้อมใด ๆ สนุก!

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

หมายเหตุ: ตำแหน่งของแต่ละค่าในอาร์เรย์ด้านบนมีความสำคัญ The ""เป็นตัวยึดสำหรับรหัสที่มีค่าที่ไม่รู้จัก

ลองใช้ข้อมูลโค้ดต่อไปนี้โดยใช้วิธีการค้นหาอาร์เรย์คงที่นี้ ...

แสดงตัวอย่างโค้ด

รหัสคีย์ที่น่าสังเกต

ตัวอักษร AZ: (65-90)

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

ตัวเลข 0-9: (48-57)

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

แผ่นตัวเลข 0-9: (96-105)

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

ปุ่มลูกศร: (37-40)

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

รหัสกุญแจ: (9)

keyboardMap[9];  // TAB

ป้อนรหัส: (13)

keyboardMap[13];  // ENTER

แป้น Spacebar: (32)

keyboardMap[32];  // SPACE

คีย์เฉพาะของระบบปฏิบัติการ (91) คีย์ Windows (Windows) หรือคีย์ Command (Mac)

keyboardMap[91];  // OS_KEY

ปุ่ม Alt: (18)

keyboardMap[18];  // ALT

รหัสควบคุม: (17)

keyboardMap[17];  // CONTROL

ปุ่ม Shift: (16)

keyboardMap[16];  // SHIFT

ปุ่ม Caps Lock: (20)

keyboardMap[20];  // CAPS_LOCK
— DaveAlger
แหล่งที่มา
ไม่ทำงานสำหรับตัวอักษรพิเศษหากป้อนคีย์ด้วยปุ่ม Shift โซลูชันใด ๆ
— Shaik Matheen
14

เพียงบันทึกสำคัญ: คำตอบที่ได้รับการยอมรับด้านบนจะทำงานไม่ถูกต้องสำหรับ keyCode> = 144 เช่นจุด, จุลภาค, เครื่องหมายขีดกลาง ฯลฯ สำหรับคำตอบที่คุณควรใช้อัลกอริทึมทั่วไป:

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

หากคุณสงสัยว่าทำไมสิ่งนี้จึงมีความจำเป็นเนื่องจากพฤติกรรมของฟังก์ชัน JS ในตัว String.fromCharCode()ตัว สำหรับค่าของkeyCode <= 96มันดูเหมือนว่าแผนที่โดยใช้ฟังก์ชั่น:

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

สำหรับค่าของ keyCode > 96มันดูเหมือนว่าแผนที่โดยใช้ฟังก์ชั่น:

chrCode = keyCode

ถ้าสิ่งนี้ดูเหมือนว่าพฤติกรรมแปลก ๆ ก็ดี .. ฉันเห็นด้วย น่าเสียดายที่มันไกลจากสิ่งที่แปลกที่สุดที่ฉันเคยเห็นในแกน 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"/>
ขยายตัวอย่างข้อมูล

— galarant
แหล่งที่มา
1
คุณกำลังจะทำให้ผู้คนสับสนโดยใช้letในการตอบคำถามจากปี 2009 :-)
— David Murdoch
12
หากมีคนค้นพบ ES6 โดยมองขึ้นมาletฉันก็ชอบพวกเขา ;-)
— กาลันรับประกัน
@galarant คุณช่วยอธิบายได้ว่าทำไม / ทำงานอย่างไร
— Izhar Aazmi
@IzharAazmi เพิ่มคำอธิบายแล้ว หวังว่ามันจะช่วย!
— galarant
1
นอกจากนี้ยังทำงานไม่ถูกต้องสำหรับปุ่มตัวเลขบนแป้นพิมพ์ตัวเลข (ตารางของปุ่มทางด้านขวาของแป้นพิมพ์แบบขยาย)
— Scott Buchanan
2

ฉันสมมติว่านี่เป็นเกมหรือแอปพลิเคชันที่ตอบสนองอย่างรวดเร็วดังนั้นการใช้ KEYDOWN กว่า KEYPRESS

แก้ไข : แดง! ฉันยืนแก้ไข (ขอบคุณ Crescent Fresh และ David): JQuery (หรือแม้แต่โฮสต์ DOM ที่อยู่ข้างล่าง) ไม่ได้เปิดเผยรายละเอียดของ WM_KEYDOWN และกิจกรรมอื่น ๆ ค่อนข้างจะย่อยข้อมูลนี้ล่วงหน้าและในกรณีของ keyDown แม้ใน JQuery เราจะได้รับ:

  • event.keyCode สำหรับกุญแจที่ไม่ใช่ตัวอักษร
  • event.charCode สำหรับปุ่มตัวอักษร

โปรดทราบว่าคุณสมบัติเหล่านี้เป็นค่า UniCode
หมายเหตุฉันไม่สามารถค้นหาการอ้างอิงที่มีสิทธิ์ในเอกสาร JQuery แต่ตัวอย่างที่มีชื่อเสียงจำนวนมากบนเน็ตอ้างถึงคุณสมบัติทั้งสองนี้

รหัสต่อไปนี้ซึ่งดัดแปลงมาจาก java บางตัว (ไม่ใช่จาวาสคริปต์) ของฉันจึงผิดทั้งหมด ...

ต่อไปนี้จะให้ส่วนที่น่าสนใจของรหัส:

  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- สนาม
แหล่งที่มา
hm, ไม่ไป, scanCode จะให้ผลลัพธ์เป็น 0 เสมอและ e.KeyCode ควรเป็น e.keyCode (KeyCode ไม่ได้ถูกกำหนด)
— David Murdoch
เฮ้ตอนนี้ ... สวัสดีเดี๋ยวก่อน ... เราคุยกัน JScript ที่นี่หรืออะไร?
— Crescent Fresh
@ David M. ฉันไม่ดีบางที JQuery "ส่วนย่อยล่วงหน้า" ส่วนรหัสเหล่านี้สำหรับเรา ฉันกำลังดูอยู่ตอนนี้
— mjv
1
@mjv: คุณได้รับรหัสนี้จากที่ไหน มันเคยทำงานให้คุณ? AFAIK ไม่มีการใช้งาน DOM เข้ารหัสข้อมูลทั้งหมดลงในวัตถุเหตุการณ์ ( keydownหรือไม่)
— Crescent Fresh
@Crescent: ฉันปรับมันได้อย่างรวดเร็วและไร้เดียงสาจากจาวาโค้ดของฉันบางอย่างเก่าที่ ... อย่างไรก็ตามคุณมีสิทธิ์โดยสิ้นเชิง: ไม่มี DOM โฮสต์ใดที่แจกกิจกรรมดิบ ๆ เช่นนั้นแม้แต่กับแป้นพิมพ์ ฉันแก้ไขร้อยแก้วของฉันตาม; ยังคงมองหาเอกสารที่เชื่อถือได้เกี่ยวกับเรื่องนี้จาก JQuery.com
— mjv
0

ฉันรู้ว่านี่เป็นคำถามเก่า แต่วันนี้ฉันเจอปัญหาในการค้นหาวิธีแก้ไขปัญหาก่อนบรรจุและไม่พบสิ่งใดที่ตรงกับความต้องการของฉัน

นี่คือโซลูชัน (ภาษาอังกฤษเท่านั้น) ที่รองรับตัวพิมพ์ใหญ่อย่างถูกต้อง (เลื่อน), ตัวพิมพ์เล็ก, เครื่องหมายวรรคตอน, ปุ่มกดตัวเลข ฯลฯ

นอกจากนี้ยังช่วยให้สามารถระบุตัวตนที่ง่ายและตรงไปตรงมาและการตอบสนองต่อปุ่มที่ไม่สามารถพิมพ์ได้เช่น ESC, ลูกศร, ปุ่มฟังก์ชั่นเป็นต้น

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

keyboardCharMap and keyboardNameMap are the key to making this work

ขอบคุณ DaveAlger ที่ช่วยฉันพิมพ์ - และค้นพบมาก! - โดยการให้ Named Key Array

— BRebey
แหล่งที่มา
ซอของคุณยอดเยี่ยมที่สุด! ขอบคุณสำหรับการแบ่งปัน. มันใช้งานได้ดี ฉันใช้มันในการดำเนินการแก้ไข Sublime สไตล์หลายเคอร์เซอร์สำหรับเขตข้อมูลฟอร์มกับรายการที่มีค่าเดียวกัน
— ทอดด์ค้อน
0

ผมเพิ่งเขียนโมดูลที่เรียกว่าkeysightที่แปลkeypress, keydownและkeyupเหตุการณ์ที่เกิดขึ้นเป็นตัวอักษรและปุ่มตามลำดับ

ตัวอย่าง: 

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
 })
— BT
แหล่งที่มา
มันรองรับคีย์อย่างñไหม?
— Arnold Roa
@ArnoldRoa ฉันแค่ผลักสิ่งที่หวังว่าจะสนับสนุนตัวละครแบบนั้น ฉันไม่มีแป้นพิมพ์ที่มีอักขระเน้นเสียงดังนั้นคุณจะลองทดสอบดูไหม
— BT
0

สำหรับบรรดาของคุณที่มาที่นี่เพื่อค้นหาค่าอักขระ Unicode จริงสำหรับรหัสเช่นเดียวกับฉันนี่คือฟังก์ชันสำหรับสิ่งนั้น ตัวอย่างเช่นให้กำหนดรหัสลูกศรขวา Unicode นี้จะส่งออกสตริงที่มองเห็นได้\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
แหล่งที่มา
0

keyนอกจากนี้คุณยังสามารถใช้คุณสมบัติอ่านอย่างเดียว นอกจากนี้ยังเคารพคีย์พิเศษเช่นshiftอื่น ๆ และรองรับ IE9

เมื่อตัวละครที่ไม่สามารถพิมพ์หรือพิเศษถูกกดค่าจะอยู่ในส่วนของการกำหนดค่าคีย์เหมือนหรือ'Shift''Multiply'

  • แป้นพิมพ์     event.key
  • X             -> 'x'
  • Shift+ X ->'X'
  • F5            -> 'F5'
— คิมเคอร์น
แหล่งที่มา
-2

อ้างอิงลิงค์นี้รับ Keycode จากการกดปุ่มและค่าถ่านสำหรับรหัสคีย์ใด ๆ

$('input#inp').keyup(function(e){
   $(this).val(String.fromCharCode(e.keyCode)); 
   $('div#output').html('Keycode : ' + e.keyCode);  
});
— user2269057
แหล่งที่มา
1
มันไม่ถูกต้อง! เนื่องจากไม่คำนึงถึงภาษาปัจจุบันที่เปิดใช้งานบนแป้นพิมพ์ของผู้ใช้ ตัวอย่างเช่นฉันป้อน 'ф' แต่ให้ 'a' ...
— Vadim Guzev
สิ่งนี้ไม่ถูกต้องข้อความจะเปลี่ยนไปตามเลย์เอาต์ของแป้นพิมพ์
— Arnold Roa
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.