Menu
How do I bind a function to the key down/up events?
It can be either binded 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.
Ive tried this: (FF 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>
930
The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.
The keyup event is fired when a key is released. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
The keydown and keypress events fire multiple times if user press and hold a key. While keyup fires only once when user releases the key.
If you want to trigger the key-events with specific keys, you can do so like this: $(function() { var e = $. Event('keypress'); e. which = 65; // Character 'A' $('item').
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);
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
