Html5 canvas 将键盘事件附加到html5画布

看起来

鼠标事件

会将监听器添加到

画布

元素，但

键盘事件

似乎不适用于

画布

元素

例如：

浏览器： 铬14.0 FF 5.0.1

我知道我可以使用文档级监听器，但我尝试先获取Canvas元素（这样你的键盘就可以在页面的其他地方工作）

---

关于如何让关键事件侦听器在画布元素上工作，您有什么想法吗？

我认为您不能将键盘事件侦听器直接添加到画布。如果您不想在窗口级别注册事件处理程序，那么我认为您可以将画布包装在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!");
});

无法创建画布！
jQuery（“canvasWrapper”）.keypress（函数（e）{
键[e.keyCode]=真；
警报（“按键！”）；
});

另一个有趣的方法是在画布标记上使用tabIndex，并在画布上绑定keypress。我已经在JSFIDLE上更新了代码，并粘贴到这里以供将来参考

<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();

$（“我的画布”）.bind({
向下键：功能（e）{
var key=e.keyCode；
var elem=document.getElementById（“我的画布”）；
var context=elem.getContext（“2d”）；
context.font=“bold 20px无衬线”；
clearRect（0,0300200）；
上下文。填充文本（“按下键”+键，10,29）；
},
聚焦：功能（e）{
$（e.currentTarget）.addClass（“选定”）；
},
聚焦输出：功能（e）{
$（e.currentTarget）.removeClass（“选定”）；
}
});
$（“我的画布”）.focus（）；

起初这对我不起作用，但当我用鼠标单击div/canvas时，它就会启动。我猜这是一个焦点问题。编辑-是的，解释如何聚焦画布。