在键盘上获得正确的字符事件

Getting correct character on keyboard event

本文关键字：字符 事件 键盘      更新时间：2023-09-26

我正在制作一个小文字游戏，我需要获得用户在键盘上输入的最后一个字符。我想出了两种方法。

第一个是通过监听文档键盘事件并通过keycode获取每个字符。它工作得非常好，直到我开始用键盘死键(如Ā)编写字符。String.fromCharCode(e.keyCode)将其转换为A，因为keyCode是针对A的，但似乎没有关于事件产生的死键或真实字符的事件。

第二个是保持一个隐藏的输入总是集中(坏)和键盘事件获得输入的值的最后一个字符，但这只适用于如果我写得很慢。我的代码是这样的:

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/-您应该在输入下面得到相同的单词，但是当您写得快一点时，结果是错误的。

你有一些建议如何获得真正的(正确的)字符键盘事件或为什么输入keyup事件是这样的行为?

更新!

正如我在评论部分提到的。babajic的答案不太适合我的情况，但感谢Semir，我发现这个愚蠢的解决方案有效:

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();

我仍然希望找到一种方法来获得真正的字符从键盘事件使用任何$(document)键盘事件，因为保持输入的焦点似乎不是一个好的解决方案。

更新2 !

为了防止其他人有类似的问题，我发现这个解决方案是最好的:

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]，它只是很慢。

试试这个:

更新:

$('#fake_input').keypress(function(e){
    $('#result').append(String.fromCharCode(e.which) + '<br />');
}).focus();

解释。我假设您想使用keypress而不是keyup来捕获字符。请注意，keyup并不与字符无关。它只告诉你它接收到的键盘信号的键码。对于keypress，您可以确定这种情况，因为您获得了字符的键码。

http://jsfiddle.net/YkaBm/8/

问候。

相关文章：