2012-05-10 7 views
2

私は共同壁を構築しようとしています。これはウェブページにアクセスしているすべてのユーザーに同じように見え、ユーザー間で同期します。私はキャンバスに正しく適用するためにキーボード入力をキャプチャするのに苦労しています。私の機能はdocument.onkeydownに基づいており、上記のWebページで参照されている 'script.js'に見ることができます。単語と書き込みをダブルクリックすると動作することがわかります。document.onkeydownキーボード入力のみが大文字に変換されます

これは残念ながら大文字以外のものを取り込むことに失敗しているようですが、これについて別の方法を探しています。この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(); 
} 

答えて

2

さて、あなたのコードを変更する一つの些細な方法は、シフトキーを追跡するために、次のようになります。

... 
    { 
     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をログに記録しますこの例では。

関連する問題