キーボードイベントをhtml5キャンバスに貼り付けて

Question

はcanvas要素にリスナーを追加しますが、keyboard eventsはcanvas要素では機能していないようです。

例： http://jsfiddle.net/H8Ese/1/

ブラウザ： クローム14.0 FF 5.0.1

私は、ドキュメントレベルのリスナーを使用することができます知っているが、私は（ように、最初のキャンバス要素を取得しようとしていますキーボードはページ上の他の場所でも使用できます）。

キャンバス要素のキーイベントリスニングを取得する方法についてのアイデアはありますか？

Answer 1

キーボードイベントリスナーをキャンバスに直接追加することはできません。ウィンドウレベルでイベントハンドラを登録したくない場合は、div内にキャンバスをラップし、divイベントにキーボードイベントを登録することができます。

<div id="canvasWrapper" style="border:1px solid; width:600px; height:400px;"> 
     <canvas id="canvas" width="600" height="400" > 
      Could not create Canvas! 
     </canvas> 
</div> 

jQuery("#canvasWrapper").keypress(function(e){ 
keys[e.keyCode] = true; 
alert("key pressed!"); 
}); 

もう1つの興味深い方法は、キャンバスタグでtabIndexを使用し、キャンバスにkeypressをバインドすることです。私はjsfiddleでコードを更新し、将来の参照のためにここに貼り付けました。

<canvas id="my-canvas" tabindex="1"></canvas> 


$("#my-canvas").bind({ 
keydown: function(e) { 
    var key = e.keyCode; 
    var elem=document.getElementById("my-canvas"); 

    var context=elem.getContext("2d"); 
    context.font = "bold 20px sans-serif"; 
    context.clearRect(0,0,300,200); 
    context.fillText("key pressed " + key, 10,29); 

}, 

focusin: function(e) { 
    $(e.currentTarget).addClass("selected"); 
}, 

focusout: function(e) { 
    $(e.currentTarget).removeClass("selected"); 
} 
}); 
$("#my-canvas").focus();