将键盘事件附加到html5画布

Question

它似乎mouse events会将canvas元素添加到元素中,但keyboard events似乎不适用于canvas元素.

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

浏览器:Chrome 14.0 FF 5.0.1

我知道我可以使用文档级别的侦听器,但我正在尝试首先获取Canvas元素(以便您的键盘可以在页面上的其他位置工作).

关于如何在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并在画布上绑定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();