2

我正在尝试建立一个公共墙，对于所有访问网页的人来说，它看起来都是一样的，并且在用户之间同步。我正在努力正确捕获键盘输入以应用于画布。我的功能基于document.onkeydown，可以在上述网页中引用的'script.js'中看到。当您双击一个单词并写入时，可以看到它正在工作。

不幸的是，这似乎无法捕获除大写字母之外的任何内容，我正在寻找另一种方法来解决这个问题。我已经查看了本页中描述的“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();
}
4

1 回答 1

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。

于 2012-05-10T13:56:05.523 回答