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

Gin*_*ans 11 javascript jquery keyboard-events

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

第一个是通过监听文档键盘事件并通过键码获取每个char.直到我开始用键盘死键(如Â)编写字符时,它工作得非常好.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();
Run Code Online (Sandbox Code Playgroud)

这是一个工作示例 - http://jsfiddle.net/YkaBm/1/ - 你应该在输入下面得到相同的单词,但是当你写得快一点时,结果是错误的.

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

更新!

正如我在评论中提到的那样,semir.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();
Run Code Online (Sandbox Code Playgroud)

我仍然希望找到一种方法来使用任何$(文档)键盘事件从键盘事件中获取真实角色,因为保持输入聚焦似乎不是一个好的解决方案.

更新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]);
    });
}
Run Code Online (Sandbox Code Playgroud)

sem*_*jic 8

这条线造成了"瓶颈":this.value[this.value.length - 1]它只是很慢.

试试这个:

更新:

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

说明.我假设您想要使用keypress而不是keyup捕获字符.请注意,keyup与字符无关.它只会告诉您收到的键盘信号的键码.有了keypress,您可以确定案例,因为您获得了角色的密钥代码.

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

问候.