2

私は、Webページにアクセスするすべての人に同じように見え、ユーザー間で同期する共同の壁を構築しようとしています。キャンバスに適用するためにキーボード入力を正しくキャプチャするのに苦労しています。私の関数はdocument.onkeydownに基づいており、上記のWebページで参照されている「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

コードを変更する簡単な方法の1つは、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 に答える