Javascript bind keyup/down event

Question

How do I bind a function to the key down/up events?

It can be either bound to the entire document or a single element, either will work in this case.

This has to be without any JavaScript library. I am only primarily concerned with the latest Firefox. Particularly the canvas element.

I've tried this: (Firefox 3.6.9 Windows 7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div class="wrapper">
            <canvas id="game" width="800" height="400">
            </canvas>
        </div>
        <script type="text/javascript">
            var el = document.getElementById("game");

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

            el.onkeyup = function(evt) {
                evt = evt || window.event;
                alert("keyup: " + evt.keyCode);
            };
        </script>
    </body>
</html>

Tim Down · Accepted Answer · 2010-09-11T12:29:59.583

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);
    });
}

can you please tell me what is `evt` in the above code, does it simply mean a keyup of can fire if some other kind of event is fired — , Sep 15 '13 at 08:10

Javascript bind keyup/down event

1 Answers1

Linked