从JavaScript中的KeyCode获取字符值…然后修剪
这是我现在所拥有的：
$("input").bind("keydown",function(e){ var value = this.value + String.fromCharCode(e.keyCode); } 如果e.keyCode可能不是一个ASCII字符（ Alt ， backspace ， del ， arrows等）…我现在需要以某种方式从value trim这些值（最好是以编程方式 – 而不是查找表）。
我正在使用jQuery。
我必须使用keydown事件。 keyPress不会激活我需要捕获的某些键（ Esc ， del ， backspace等）。
我不能使用setTimeout来获取input的值。 setTimeout(function(){},0)太慢了。
也许我没有正确理解这个问题，但是如果你想捕获两个input，你能不能使用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键码。 Javascript的键码和unicode的charcodes 不是一回事！ 特别是，数字keycode从普通的数字键（因为它们是不同的键）返回一个不同的keycode ，而对于lowercase字母都是相同的keycode （在这两种情况下你都按下相同的键），尽pipe它们具有不同的charcodes 。
例如，普通数字键1用keycode 49生成事件，而数字键1（用Numlock打开）生成keycode 97.与String.fromCharCode使用，我们得到以下内容：
String.fromCharCode(49) returns "1" String.fromCharCode(97) returns "a"
String.fromCharCode需要unicode charcodes，而不是javascript的keycodes。 键a产生一个keycode为65的事件，而不pipe它将产生的字符的情况（在事件中还有一个修改键，如果按下Shift键等）。 字符a具有61的unicode charcode ，而字符A具有41的charcode （根据例如http://www.utf8-chartable.de/ ）。 然而，那些是hex值，转换为十进制给我们一个65代表“A”和97代表“a”的charcode 。[1] 这与我们从String.fromCharCode获得这些值是一致的。
我自己的要求仅限于处理数字和普通字母（接受或拒绝取决于string中的位置），并让控制字符（ F键， Ctrl -某些东西）通过。 因此，我可以检查控制字符，如果它不是一个控制字符，我检查一个范围，只有这样我才需要得到实际的字符。 鉴于我不担心大小写（我将所有字母都改为大写），并且已经限制了键码的范围，所以我只需要担心键盘按键。 以下就足够了：
String.fromCharCode((96 <= key && key <= 105)? key-48 : key)
更一般地说，从charcode可靠地返回字符的charcode是很好的（也许作为一个jQuery插件），但我没有时间写它。 抱歉。
我还会提到e.which （如果你使用的是jQuery）， e.keyCode和e.charCode标准化，这样你就不用担心被按下的是什么types的键。 与String.fromCharCode结合的问题仍然存在。
[1]我困惑了一会儿。 所有的文档都说String.fromCharCode需要一个Unicode charcode ，而实际上它似乎适用于ASCII字符码，但那是我认为由于需要从hex转换为十进制，加上ASCII字符和Unicode十进制charcodes重叠为普通拉丁字母。
按键代码索引的可读键名称
有相对较less的关键代码，所以我只是列出所有相应的值在一个静态数组，所以我可以简单地使用keyboardMap[65]转换为A
不是所有的键码映射到一个可打印的字符，所以返回一些其他可识别的string。
您可能需要修改数组以适合您的需要，并且可以简单地返回不需要转换的所有字符的空string。 下面的数组允许我快速可靠地确定哪个键在任何环境中被按下。 请享用！
// 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>
只是一个重要的注意事项：上面接受的答案将无法正确工作keyCode> = 144，即周期，逗号，短划线等。对于那些你应该使用更通用的algorithm：
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核心中看到的最奇怪的事情相去甚远。
我假设这是一个游戏或快速响应types的应用程序，因此使用KEYDOWN比KEYPRESS。
编辑 ：当！ 我站在更正（谢谢Crescent Fresh和David）：JQuery（甚至是底层DOM主机） 不公开WM_KEYDOWN和其他事件的细节。 相反，他们预先消化这些数据，在keyDown的情况下，甚至在JQuery中，我们得到：
- event.keyCode用于非字符键
- 用于字符键的event.charCode
请注意，这些属性是UniCode值。
请注意，我无法在JQuery文档中find对此的权威性参考，但是networking上的许多有声望的示例引用了这两个属性。
下面的代码，改编自我的一些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
为了回应这个问题，我只写了一个jQuery插件： https ： //github.com/bpeacock/key-to-charCode/
这是有点沮丧，可以更好地集成到jQuery，但这是一个开始。
我知道这是一个古老的问题，但我今天遇到了这个问题，寻找一个预先打包的解决scheme来解决这个问题，并没有发现真正满足我的需求。
这是一个正确支持大写（移位），小写，标点，数字键盘等的解决scheme（只有英文）。
它还允许简单和直接地识别 – 和不可打印的键，如ESC，箭头，function键等。
https://jsfiddle.net/5hhu896g/1/
keyboardCharMap and keyboardNameMap are the key to making this work
感谢DaveAlger为我节省了一些打字工作 – 而且还有很多发现！ – 通过提供命名键arrays。
我最近编写了一个名为keysight的模块，分别将keypress ， keydown和keyup事件转换为字符和键。
例：
element.addEventListener("keydown", function(event) { var character = keysight(event).char })
请参考此链接获取键码和键值的任何键码
$('input#inp').keyup(function(e){ $(this).val(String.fromCharCode(e.keyCode)); $('div#output').html('Keycode : ' + e.keyCode); });
