javascript – 在键盘事件中获取正确的字符

前端之家收集整理的这篇文章主要介绍了javascript – 在键盘事件中获取正确的字符前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在做一个小小的单词游戏,我需要得到用户键盘上输入的最后一个字符.我想到了两种方式来做到这一点.

第一个是通过听文件键盘事件并通过键码获取每个字符.它工作得很好,直到我开始用键盘死键(如Ā)编写字符. String.fromCharCode(e.keyCode)将它转换为A,因为keyCode用于A,但事件中似乎没有任何关于死锁或真实char的事件.

第二个是保持隐藏的输入总是集中(不好)和键盘事件获取输入值的最后一个字符,但这只有在写得相当慢的时候才起作用.我的代码如下所示:

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/ – 你应该在输入下面得到相同的单词,但是当你写得更快一点就会出错.

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

更新!

正如我在评论中提到的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();

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

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

说明.我假设你想使用键盘而不是键盘来捕获字符.请注意,keyup与字符无关.它只告诉你接收到的键盘信号的键码.使用按键,您可以确定情况,因为您获得字符的键码.

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

问候.

猜你在找的JavaScript相关文章