احصل على قيمة الحرف من رمز المفاتيح في JavaScript ... ثم تقليم

StackOverflow https://stackoverflow.com/questions/1772179

سؤال

هذا ما لدي الآن:

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

إذا e.keyCode قد لا تكون شخصية ASCII (البديل, المساحة الخلفية, ديل, السهام, ، إلخ.) ... سأحتاج الآن trim هذه القيم من value بطريقة ما (يفضل برمجيًا - ليس مع جداول البحث).

أنا أستخدم jQuery.

يجب أن أستخدم keydown حدث. keyPress لا يتم تنشيط بعض المفاتيح التي أحتاجها لالتقاطها (خروج, ديل, المساحة الخلفية, ، إلخ.).

لا أستطيع استخدام setTimeout للحصول على قيمة الإدخال. setTimeout(function(){},0) بطيء جدا.

هل كانت مفيدة؟

المحلول

ربما لم أفهم السؤال بشكل صحيح ، لكن لا يمكنك استخدامه keyup إذا كنت تريد التقاط كلا المدخلات؟

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

نصائح أخرى

في تجربتي String.fromCharCode(e.keyCode) غير موثوق به. String.fromCharCode يتوقع unicode charcodes كحجة ؛ e.keyCode إرجاع javaScript Keycodes. javaScript Keycodes و Unicode charcodes ليس نفس الشيء! على وجه الخصوص ، تُرجع مفاتيح NumberPad مختلفة keycode من مفاتيح الأرقام العادية (نظرًا لأنها مفاتيح مختلفة) في حين keycode تم إرجاعه لكليهما upper و lowercase رسائل (ضغطت على نفس المفتاح في كلتا الحالتين) ، على الرغم من وجودها مختلف charcodes.

على سبيل المثال ، يقوم مفتاح الرقم العادي 1 بإنشاء حدث مع keycode 49 بينما مفتاح NumberPad 1 (مع numlock على) يولد keycode 97. يستخدم مع String.fromCharCode نحصل على ما يلي:

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

String.fromCharCode يتوقع charcodes Unicode ، وليس javaScript Keycodes. المفتاح أ يولد حدثًا مع keycode من 65 ، المستقل عن حالة الشخصية التي ستولدها (هناك أيضًا معدل ل يحول يتم الضغط على المفتاح ، وما إلى ذلك في الحدث). الشخصية أ لديه Unicode charcode من 61 بينما الشخصية أ لديه charcode من 41 (حسب ، على سبيل المثال ، http://www.utf8-chartable.de/). ومع ذلك ، هؤلاء هم hex القيم ، والتحويل إلى عشري يعطينا أ charcode من 65 لـ "A" و 97 لـ "A". [1] هذا يتفق مع ما نحصل عليه String.fromCharCode لهذه القيم.

اقتصر متطلباتي الخاصة على أرقام المعالجة والرسائل العادية (قبول أو رفض اعتمادًا على الموضع في السلسلة) والسماح لأحرف التحكم (F-كيف ، كنترول-شيء) من خلال. وبالتالي ، يمكنني التحقق من أحرف التحكم ، إذا لم تكن شخصية تحكم ، فأنا أتحقق من نطاقها وعندها فقط أحتاج إلى الحصول على الحرف الفعلي. بالنظر إلى أنني لست قلقًا بشأن الحالة (أقوم بتغيير جميع الرسائل إلى الكبير على أي حال) وقمت بالفعل بحد من نطاق الرموز الرئيسية ، فأنا فقط على مادة القلق بشأن مفاتيح NumberPad. ما يلي ما يلي:

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

بشكل عام ، وظيفة لإعادة الشخصية بشكل موثوق من أ charcode سيكون رائعًا (ربما كمساعد jQuery) ، لكن ليس لدي وقت لكتابته الآن. آسف.

أود أن أذكر أيضا e.which (إذا كنت تستخدم jQuery) التي تطبيع e.keyCode و e.charCode, ، بحيث لا تحتاج إلى القلق بشأن نوع المفتاح الذي تم الضغط عليه. المشكلة مع الجمع بينها مع String.fromCharCode بقايا.

1] كنت في حيرة من أمري لبعض الوقت -. كل المستندات تقول ذلك String.fromCharCode يتوقع Unicode charcode, ، بينما يبدو أنه في الممارسة العملية ، يبدو أنه يعمل لدى ASCII charcodes ، لكن هذا كان أعتقد أنه بسبب الحاجة إلى التحول إلى العشرية من Hex ، إلى جانب حقيقة أن ASCII charcodes و unicode charcodes العشرية تتداخل مع الحروف اللاتينية العادية.

أسماء المفاتيح القابلة للقراءة مفهرسة بواسطة رمز المفتاح

هناك عدد قليل نسبيًا من رموز المفاتيح ، لذا قمت ببساطة بإدراج جميع القيم المقابلة في صفيف ثابت حتى أتمكن من تحويل الرقم ببساطة 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]
];

ملحوظة: من المهم موضع كل قيمة في الصفيف أعلاه. ال "" هي أصحاب نائبة للرموز ذات القيم غير المعروفة.

جرب مقتطف الكود التالي باستخدام نهج البحث الصفيف الثابت ...

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>


الرموز الرئيسية تستحق الإشارة

رسائل 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

مفتاح المسافة: (32)

keyboardMap[32];  // SPACE

مفتاح OS محدد (91) مفتاح Windows (Windows) أو مفتاح الأوامر (MAC)

keyboardMap[91];  // OS_KEY

مفتاح بديل: (18)

keyboardMap[18];  // ALT

مفتاح التحكم: (17)

keyboardMap[17];  // CONTROL

مفتاح التحول: (16)

keyboardMap[16];  // SHIFT

مفتاح قفل القبعات: (20)

keyboardMap[20];  // CAPS_LOCK

مجرد ملاحظة مهمة: لن تعمل الإجابة المقبولة أعلاه بشكل صحيح من أجل رمز المفاتيح> = 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"/>

أفترض أن هذا مخصص للعبة أو لنوع التطبيق سريع الاستجابة للتطبيق وبالتالي استخدام KeyDown من keypress.

تعديل: دانغ! أقف تصحيحًا (شكرًا لك Crescent Fresh و David): jQuery (أو حتى مضيفو DOM الأساسيين) ليس فضح تفاصيل WM_Keydown والأحداث الأخرى. بدلاً من ذلك ، يقومون بتهوية هذه البيانات مسبقًا ، وفي حالة KeyDown حتى في jQuery ، نحصل على:

لاحظ أن هذه الخصائص هي قيم Unicode.
لاحظ ، لم أتمكن من العثور على إشارة موثوقة إلى مستندات jQuery ، ولكن العديد من الأمثلة ذات السمعة الطيبة على الشبكة تشير إلى هاتين الخصائص.

الرمز التالي ، المقتبس من بعض Java (وليس JavaScript) الخاص بي ، لذلك هو خطأ تماما ...

سيمنحك ما يلي الأجزاء "المثيرة للاهتمام" من رمز المفاتيح:

  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

أعلم أن هذا سؤال قديم ، لكنني صادفته اليوم بحثًا عن حل معبأ مسبقًا لهذه المشكلة ، ولم أجد شيئًا تلبي احتياجاتي حقًا.

فيما يلي حل (اللغة الإنجليزية فقط) يدعم الحالة العليا بشكل صحيح (تم تحويله) ، الحالة السفلية ، علامات الترقيم ، العدد لوحة المفاتيح ، إلخ.

كما يسمح بتحديد بسيط ومباشر إلى الأمام للرد على المفاتيح غير القابلة للطباعة ، مثل ESC ، الأسهم ، مفاتيح الوظائف ، إلخ.

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

keyboardCharMap and keyboardNameMap are the key to making this work

بفضل Devealger لإنقاذي بعض الكتابة - والكثير من الاكتشاف! - من خلال توفير صفيف المفتاح المسماة.

لقد كتبت مؤخرًا وحدة تسمى Keysight هذا يترجم keypress, keydown, ، و keyup الأحداث في الشخصيات والمفاتيح على التوالي.

مثال:

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

لأولئك منكم الذين أتوا إلى هنا يبحثون عن قيم أحرف Unicode الفعلية لرمز المفاتيح ، كما فعلت ، إليك وظيفة لذلك. على سبيل المثال ، بالنظر إلى السهم الأيمن Unicode Keycode ، سيؤدي هذا إلى إخراج السلسلة المرئية \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;
}

يمكنك أيضًا استخدام خاصية القراءة فقط key. كما يحترم مفاتيح خاصة مثل تحول وما إلى ذلك ويدعمها IE9.

عندما يتم الضغط على حرف غير قابل للطباعة أو الخاص القيم الأساسية مثل 'Shift' أو 'Multiply'.

  • لوحة المفاتيح event.key
  • x             -> 'x'
  • يحول+x -> 'X'
  • F5            -> 'F5'

إحالة هذا الرابطاحصل على رمز المفاتيح من مفتاح الضغط وقيمة char لأي رمز مفتاح

$('input#inp').keyup(function(e){
   $(this).val(String.fromCharCode(e.keyCode)); 
   $('div#output').html('Keycode : ' + e.keyCode);  
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top