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!

Did you find a solution to your question by now? – Kaffee Jul 05 '13 at 09:44 — Kaffee, Jul 05 '13 at 09:44

andyrandy · Answer 1 · 2013-09-29T08:56:52.900

4

I suggest using one of the Keyboard Plugins out there:

They work well together with KineticJS.

edited Sep 29 '13 at 08:56

answered Aug 15 '13 at 17:13

andyrandy

72,880
8
113
130

score 1 · Answer 2 · answered Jul 24 '13 at 01:49

1

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

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

answered Jul 24 '13 at 01:49

verymessi

117
1
12

this is the only real lightweight answer – tetris11 Mar 18 '15 at 10:59

score 0 · Answer 3 · answered May 13 '13 at 01:37

0

As of right now On only supports mouse and touch events.

Each layer has its own canvas that you can grab and attach events to.

answered May 13 '13 at 01:37

Yamiko

5,303
5
30
52

score 0 · Answer 4 · edited May 23 '17 at 12:28

From the limited experience I have with this (2 days), I saw that each layer you add becomes a canvas, so if you have a reference to the topmost layer in a variable (i.e. topmostLayer), you can do

var canvas = $(topmostLayer.getContext().canvas);

With this in place, what @devnull69 suggested just works:

canvas.attr('tabindex', 0);
canvas.keydown(function (ev) { ... });

I have it in place in my application and works fine.

score 0 · Answer 5 · answered Apr 11 '14 at 03:50

0

see link, you need:

var canvas=layer.getCanvas()._canvas;
$(canvas).attr('tabindex', 0); // increase tabindex if needed
canvas.focus();
$(canvas).keydown(function (e) {
    console.log(e.keyCode); // your handler here
});

answered Apr 11 '14 at 03:50

kofifus

17,260
17
99
173

score -2 · Answer 6 · answered Sep 05 '12 at 13:16

-2

You'll have to make sure that the canvas element has the focus before it can accept keyboard events. Unfotunately the .focus() method didn't work for me in Firefox, so I tried this and voilà

$('canvas').attr('tabindex', 0);
$('canvas').keydown(function(e) {
    alert(e.keyCode);
    e.preventDefault();    // to stop the key events from bubbling up
});

Click the canvas and it will have the focus.

answered Sep 05 '12 at 13:16

devnull69

16,402
8
50
61

In a plain Html5-Application your answer is right. But in a kineticjs-managed Canvas it will not work also. – itinance Sep 10 '12 at 07:15

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

6 Answers6