在键盘事件上获得正确的字符 [英] Getting correct character on keyboard event
问题描述
我正在制作一个小字游戏，我需要获取用户在键盘上输入的最后一个字符。我想到了两种方法。
I am making a little word game where I need to get the last char that users enters on their keyboards. I figured two ways to do this.
第一种方法是通过监听文档键盘事件并通过keycode获取每个char。直到我开始用键盘死键（如Â）编写字符时，它工作得非常好。 String.fromCharCode（e.keyCode）将其转换为A，因为keyCode用于A，但事件似乎没有关于事件产生的死键或真实字符的事件。
First one is to get each char by listening on document keyboard event and getting it by keycode. It worked very well until I started writing chars with keyboard dead keys (like Ā). String.fromCharCode(e.keyCode) translates it to A as the keyCode is for the A, but there seems to be nothing on the event regarding dead key or real char that the event produced.
第二个是保持隐藏的输入始终聚焦（坏），并且在键盘事件中获取输入值的最后一个char，但这只有在我写得非常慢的情况下才有效。我的代码如下所示：
Second one is to keep a hidden input always focused (bad) and on keyboard event getting last char of input's value, but this only works if I write quite slowly. My code looks like this:
function is_char(e){
return (!e.ctrlKey && !e.altKey && !e.metaKey &&
(e.keyCode >= 65 && e.keyCode <= 90) ||
(e.keyCode >= 97 && e.keyCode <= 122)
);
}
$('#fake_input').on('keyup', function(e){
if (is_char(e)){
$('#result').append(this.value[this.value.length - 1]);
}
}).focus();
以下是工作示例 - http://jsfiddle.net/YkaBm/1/ - 你应该在输入下方得到相同的单词，但是当你写得快一点时，它就会出错。
Here is working example - http://jsfiddle.net/YkaBm/1/ - you should get the same word below the input, but when you write a little faster it turns out wrong.
您是否有一些建议如何在键盘事件中获得真实（正确）字符或为什么输入键盘事件是这样的？
Do you have some suggestions how to get the real (correct) character on keyboard event or why input keyup event is acting like this?
更新！
正如我在评论中提到的那样semir.babajic回答对我的案例不太有效，但多亏了Semir我发现这个愚蠢的解决方案有效：
As I mentioned in comments semir.babajic answer didn't quite work for my case, but thanks to Semir I found that this silly solution works:
function is_char(e){
return (!e.ctrlKey && !e.altKey && !e.metaKey &&
(e.keyCode >= 65 && e.keyCode <= 90) ||
(e.keyCode >= 97 && e.keyCode <= 122)
);
}
var x = 0;
$('#fake_input').on('keyup', function(e){
if (e.keyCode === 8){
x--;
}
else if (is_char(e)){
x++;
$('#result').append(this.value[x-1]);
}
}).focus();
我仍然希望找到一种方法来使用$中的任何一个从键盘事件中获取真实角色（文档）键盘事件，因为保持注意力集中似乎不是一个好的解决方案。
I would still love to find a way to get the real character from keyboard event using any of $(document) keyboard events, because keeping input focused doesn't seem as a good solution.
更新2！
为了防止其他人遇到类似问题，我发现这个解决方案最好：
Just in case anyone else is having similar issue, I found this solution the best:
App.insert_char = function(c){
if (c && c.toUpperCase() != c.toLowerCase()){
console.log(c);
}
};
if ('oninput' in $('#fake_input')[0]){
$('#fake_input').on('input', function(e){
App.insert_char(this.value[this.value.length - 1]);
});
}
else if ('onpropertychange' in $('#fake_input')[0]){
$('#fake_input').on('propertychange', function(e){
App.insert_char(this.value[this.value.length - 1]);
});
}
else if ('ontextInput' in $('#fake_input')[0]){
$('#fake_input').on('textInput', function(e){
App.insert_char(this.value[this.value.length - 1]);
});
}
推荐答案
此行导致瓶颈： this.value [this.value.length - 1] ，它只是很慢。
This line was causing a "bottleneck": this.value[this.value.length - 1], it was simply slow.
尝试相反：
更新：
$('#fake_input').keypress(function(e){
$('#result').append(String.fromCharCode(e.which) + '<br />');
}).focus();
说明。我假设您要使用 keypress 而不是 keyup 来捕获字符。请注意，keyup与字符无关。它只会告诉您收到的键盘信号的键码。使用 keypress ，您可以确定案例，因为您获得了角色的密钥代码。
Explanation. I assume you'd want to use keypress instead of keyup to trap characters. Note that keyup does not have nothing to do with characters. It only tells you the keycode of the keyboard signal it received. With keypress, you can determine the case because you get a keycode for character.
问候。
这篇关于在键盘事件上获得正确的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
