将键盘事件附加到html5画布

Question

看起来像mouse events会将收听者添加到canvas元素中，但keyboard events似乎不适用于canvas元素。

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

浏览器：Chrome的 14.0 FF 5.0.1

我知道我可以使用文档级别的听众，但我想先拿到Canvas元素（使您的键盘可以在网页上的其他地方使用）。

关于如何获取关键事件监听工作在画布元素上的任何想法？

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!"); 
}); 

另一个有趣的方法是在canvas标签上使用tabIndex并在画布上绑定按键。我已经更新了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();