这就是我现在所拥有的:
$("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)
太慢了。
也许我对问题的理解不正确,但是keyup
如果要捕获两个输入,就不能使用吗?
$("input").bind("keyup",function(e){
var value = this.value + String.fromCharCode(e.keyCode);
});
以我的经验String.fromCharCode(e.keyCode)
是不可靠的。 String.fromCharCode
期望将unicode字符代码作为参数;e.keyCode
返回javascript密钥代码。Javascript键码和unicode字符码不是同一回事!特别是,数字键盘键返回的keycode
数字与普通数字键不同(因为它们是不同的键),而字母和字母keycode
都返回相同的数字(在两种情况下都按相同的键),尽管它们具有不同的。 upper
lowercase
charcodes
例如,普通数字键1产生一个带有keycode
49的事件,而数字键盘键1(带有Numlockon)产生一个keycode
97。与之配合使用,String.fromCharCode
我们得到以下信息:
String.fromCharCode(49) returns "1"
String.fromCharCode(97) returns "a"
String.fromCharCode
需要unicode字符代码,而不是javascript键代码。按键会a生成一个keycode
65的事件,而与要生成的字符的大小写无关(如果Shift按键被按下等,还会有一个修饰符,等等)。的字符a具有一个unicodecharcode
的61,而字符A具有charcode
的41(根据,例如,http://www.utf8-chartable.de/)。但是,这些都是hex
值,如果将其转换为小数charcode
,则“ A”的值为65,而“ a”的值为97。[1] 这与我们从String.fromCharCode
这些值中得到的一致。
我自己的要求仅限于处理数字和普通字母(根据字符串中的位置接受还是拒绝)以及让控制字符(F-keys -something Ctrl)通过。因此,我可以检查控制字符,如果不是控制字符,则可以检查范围,然后才需要获取实际字符。鉴于我不担心大小写(无论如何我都将所有字母都更改为大写)并且已经限制了键码的范围,所以我只需要担心数字键盘的键。满足以下条件即可:
String.fromCharCode((96 <= key && key <= 105)? key-48 : key)
更一般而言,可靠地从中返回字符的功能charcode
会很棒(也许作为jQuery插件),但是我现在没有时间编写它。抱歉。
我还要提到e.which
(如果您使用的是jQuery)规范化e.keyCode
and e.charCode
,这样您就不必担心按下了哪种键。与String.fromCharCode
遗骸相结合的问题。
[1]我有些困惑- 所有文档都说String.fromCharCode
期望使用unicode charcode
,而实际上它似乎适用于ASCII字符,但是我认为这是由于需要从十六进制转换为十进制,再加上ASCII字符和unicode十进制字符在普通情况下会重叠的事实拉丁字母。
可读的键名由键代码索引
有那么我简单列在一个静态数组中的所有相应的值,这样我就可以数简单地转换相对较少的键码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]
];
注意: 上面数组中每个值的位置很重要。的
""
是具有未知值码的占位符。
使用此静态数组查找方法尝试以下代码片段...
值得注意的关键代码
字母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
Tab键:(9)
keyboardMap[9]; // TAB
输入键:(13)
keyboardMap[13]; // ENTER
空格键(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
大写锁定键:(20)
keyboardMap[20]; // CAPS_LOCK
只是一个重要的注意事项:上面接受的答案不适用于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"/>
我假设这是用于游戏或快速响应类型的应用程序,因此使用KEYDOWN而不是KEYPRESS。
编辑:当!我的立场是正确的(感谢Crescent Fresh和David):JQuery(甚至底层的DOM主机)不会公开WM_KEYDOWN和其他事件的详细信息。而是他们预先消化了这些数据,对于keyDown甚至在JQuery中,我们得到:
- 非字符键的event.keyCode
- 字符键的event.charCode
请注意,这些属性是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
感谢DaveAlger为我节省了一些打字工作-以及许多发现!-通过提供命名键数组。
我最近写了一个模块调用keysight是翻译keypress
,keydown
和keyup
事件为字符和钥匙分别。
例:
element.addEventListener("keydown", function(event) {
var character = keysight(event).char
})
对于像我一样来这里寻找键码的实际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;
}
您也可以使用只读属性key
。它还尊重IE等特殊键shift,并且受IE9支持。
当按下不可打印或特殊字符时,该值将位于已定义的键值中,例如'Shift'
或'Multiply'
。
- 键盘
event.key
- X ->
'x'
- Shift+ X ->
'X'
- F5 ->
'F5'
请参阅此链接,
从按键中获取键码以及任何键码的char值
$('input#inp').keyup(function(e){
$(this).val(String.fromCharCode(e.keyCode));
$('div#output').html('Keycode : ' + e.keyCode);
});
文章标签:javascript , jquery , keycode , special-characters
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!