Receiving keyboard events on a canvas in Javascript

Question

I need to receive keyboard events in a canvas element. Click events are received but key presses aren't.

Here is my code which doesn't handle key events:

var canvasElm = $('canvas');
Event.observe('canvas', 'keypress', function(e) {
    console.log('Key event is received!!');
    console.log(e);
});

How can I make it handle those key events?

Answer 1

I suspect the canvas never has the keyboard focus. Keyboard events will be sent to the Window object.

Try adding the events to the Window object. (NB: It might be clearer what's happening if you don't use JQuery)

Answer 2

I'm really sorry. I found the solution after ask the question by trying. As MarkR said, we need give focus on our canvas. Here is the pure javascript (without JQuery);

canvasElm.setAttribute('tabindex','0');
canvasElm.focus();