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/

问候.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)