How to listen to Keydown-Events in a KineticJS-managed HTML5-Canvas?

Question

I am trying to add an Event Listener to a Htm5-Canvas which is managed by Kineticjs (the Canvas was created via a Stage of KineticJS).

I tried out (using jQuery):

$(selector).keydown( function(e) {... } )

with the following Selectors:

• window (it is working, but it is listening to the whole Window and thereby not good)
• All Canvas-Elements $('canvas') <-- not working
• The Container, where KineticJS and its Canvas are embedded <-- not working
• The Container-Div of KineticJS (created by Kinetic) with $('.kineticjs-content').keydown( function() { ... } ) <-- not working

Only $(window) is working. After experimenting with plain Html5-Canvas i figured out, that the Canvas-Element has Built-in-Support for Keyboard-Events. So i think, KineticJS is doing something magic around here. Wrong Selector-Usage can be excluded.

I checked every Selector with this code: console.log( $(selector).length )

Can anyone help here? Thx in advance!

Answer 1

I suggest using one of the Keyboard Plugins out there:

• http://robertwhurst.github.io/KeyboardJS/
• http://dmauro.github.io/Keypress/

They work well together with KineticJS.

Answer 2

If you can include javascript into it, here is the code:

if(keyIsPressed && keycode == somenumber){
doSomething();
}