прикрепить события клавиатуры к холсту html5 - PullRequest
Новая
       31

прикрепить события клавиатуры к холсту html5

8 голосов
/ 30 сентября 2011

Похоже, что mouse events добавит слушателей к canvas элементам нормально, но keyboard events, похоже, не работает для canvas элементов.

Пример: http://jsfiddle.net/H8Ese/1/

Браузеры: Chrome 14.0 FF 5.0.1

Я знаю, что могу использовать прослушиватели уровня документа, но сначала я пытаюсь получить элемент Canvas (чтобы ваша клавиатура работала везде на странице).

Есть какие-нибудь идеи о том, как заставить прослушивание ключевых событий работать с элементами canvas?

1 Ответ

9 голосов
/ 30 сентября 2011

Не думаю, что вы можете добавить слушатель событий клавиатуры прямо на холст.Если вы не хотите регистрировать обработчик событий на уровне окна, я думаю, что вы можете обернуть холст внутри 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();
...