ansaurus

Question

Answer 1

+3 A:

Key events only fire on the document and elements that may receive focus. Therefore to handle key events on a <canvas> element, you either need to allow it to receive focus by adding a tabindex attribute (e.g. <canvas id="game" width="800" height="400" tabindex="1"></canvas>) or by simply handling key events for the whole document, which may not be what you want (for example, if you have more than one element on the page for which you wish to handle key events).

As to how to attach the event handlers, the simplest way is the following:

var el = document.getElementById("your_element_id");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    alert("keydown: " + evt.keyCode);
};

el.onkeyup = function(evt) {
    evt = evt || window.event;
    alert("keyup: " + evt.keyCode);
};

If you may need multiple listeners, you can use addEventListener in most browsers or attachEvent in IE <= 8:

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keydown", function(evt) {
        alert("keydown: " + evt.keyCode);
    }, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeydown", function(evt) {
        alert("keydown: " + evt.keyCode);
    });
}

Tim Down 2010-09-11 12:09:14

I couldn't get this to work, see edit

Petah 2010-09-11 12:15:55

That's because the `<canvas>` element can't receive the focus by default. You have two choices: either you can add a `tabindex` attribute to your canvas tag to allow it to receive focus or you can attach the key event handlers to `document` instead.

Tim Down 2010-09-11 12:23:19

Ok cool, it works when assigned to the document.

Petah 2010-09-11 12:30:43

ansaurus

tags:

views:

answers:

Javascript bind keyup/down event

related questions