Похоже, что mouse events прекрасно добавит слушателей к canvas элементам, но keyboard events, похоже, не работает для canvas элементов.
Пример: http://jsfiddle.net/H8Ese/1/
Браузеры: Chrome 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!");
});
Еще один интересный способ — использовать 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();
