我正在尝试构建一个公共墙,对于访问网页的所有人来说,以及用户之间的同步看起来都是一样的。我正在努力正确捕获键盘输入以应用到画布。我的函数基于document.onkeydown,可以在所述网页中引用的'script.js'中看到。当双击一个单词并写入时,可以看到它正在工作。
不幸的是,除了大写字母之外,似乎没有捕获任何东西,我正在寻找另一种方法来解决这个问题。我已经查看了这个page中描述的'textInput'事件,但它似乎只有WebKit浏览器支持,我想构建一些通用的东西。有人可以建议另一种方法来捕获用于画布的键盘输入吗?或许我在做一些愚蠢的事情?
所描述的代码在这里:
document.onkeydown = keyHandler;
function keyHandler(e)
{
var pressedKey;
if (document.all) { e = window.event;
pressedKey = e.keyCode; }
if (e.which) {
pressedKey = e.which;
}
if (pressedKey == 8) {
e.cancelBubble = true; // cancel goto history[-1] in chrome
e.returnValue = false;
}
if (pressedKey == 27)
{
// escape key was pressed
keyCaptureEdit = null;
}
if (pressedKey != null && keyCaptureEdit != null)
{
keyCaptureEdit.callback(pressedKey);
}
}
... Later on in code describing each text object ...
keyCaptureEdit.callback = function (keyCode) {
var keyCaptured = String.fromCharCode(keyCode);
if (keyCaptured == "\b" ) { //backspace character
t.attrs.timestamp = t.attrs.timestamp + 1;
t.setText(t.getText().slice(0, -1));
}
else if (keyCode == 32 || keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90)
{
t.attrs.timestamp = t.attrs.timestamp + 1;
t.setText(t.getText() + keyCaptured);
}
layer.draw();
}
答案 0 :(得分:2)
改变代码的一个简单方法就是跟踪shift键:
...
{
keyCaptureEdit.callback(pressedKey, e.shiftKey); // <-- keep track of shift key
}
}
...
keyCaptureEdit.callback = function (keyCode, shift) {
var keyCaptured = String.fromCharCode(keyCode);
// shift key not pressed? Then it's lowercase
if (shift === false) keyCaptured = keyCaptured.toLowerCase()
但这并没有考虑到CapsLock。
在jQuery中,它非常简单,因为正确的密钥代码是为您完成的:
$(document).keypress(function(event) {
var keyCaptured = String.fromCharCode(event.keyCode);
console.log(keyCaptured);
});
在该示例中,控制台将根据要键入的内容正确记录P或p。