RSS
Atom
FeedburnerKey Events
In this post, we demonstrate how to catch and handle a keyboard event. There are three basic key events: key down, key up, and key press. The “key press” event is a bit different, since it describes a combination of a key up and a key down event and generates a character code. So, we will ignore the key press and concentrate on the key up and key down events, which use key codes rather than character codes.
The key down and key up events are triggered when a key is pushed in and when a key is released. During the event, a key code is generated that determines which key on the keyboard is pushed or released.
Key Codes Versus Character Codes
A key code is different than a character code because the same key can generate multiple different characters. For example, one key generates both of the characters ‘1’ and ‘!’ on the keyboard. So, ‘1’ and ‘!’ have different character codes, but they are generated by the same key and correspond to the same key code. For a full list of the JavaScript key codes, consult our table of key codes.
The JavaScript Code
Below, we have a code sample that can be copied, pasted, and saved into a simple text file that should be saved with a .html extension. Then you can double-click the file, say “KeyEvent.html”, to open it with your default browser.
In the code, the Initialize() function sets the function KeyHandler() as the event handler for key down events, and it also initializes the color of the background rectangle in the div element, myrect, to medium gray. Once the KeyHandler() function is set as the handler for key down events, it is called whenever a key is pushed while the document has focus; focus is given to whatever is currently selected to receive messages, usually the window or the control that was last clicked.
Inside of the KeyHandler() function, we have iKeyDown, which will be used to hold the key code of the key that was pushed, and we have the key codes for the left arrow and right arrow keys stored in iLeftArrow and iRightArrow, respectively. The first “if” statement is used to store the key code; the method varies depending on the browser (the else branch is for IE). The second “if” statement sets the background color to red if the left arrow is pressed, blue if the right arrow is pressed, and green if any other key is pressed.
The Code in Action
To see the code running, left-click the red rectangle above to open a new window with the code running in it; press the arrow keys to see the color change. If the color does not change, then it is because the document does not have focus. I have added a border (not used in the code below) to the rectangle that is displayed when it receives focus. To see the focus change, left-click the address in the address bar of your browser and then left-click the rectangle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XoaX.net's Javascript Keyboard Event Example</title>
<script type="text/javascript">
/*<![CDATA[*/
var qpRect = null;
function KeyHandler(qKeyEvent) {
var iKeyDown = 0;
var iLeftArrow = 37;
var iRightArrow = 39;
if (qKeyEvent) {
iKeyDown = qKeyEvent.which;
} else {
iKeyDown = window.event.keyCode;
}
if (iKeyDown === iLeftArrow) {
qpRect.style.backgroundColor = '#ff0000';
} else if (iKeyDown === iRightArrow) {
qpRect.style.backgroundColor = '#0000ff';
} else {
qpRect.style.backgroundColor = '#00ff00';
}
return false;
}
function Initialize() {
document.onkeydown = KeyHandler;
qpRect = document.getElementById('myrect');
qpRect.style.backgroundColor='#888888';
}
window.onload = Initialize;
/*]]>*/
</script>
</head>
<body>
<div id="myrect" style="width: 300px; height: 200px; margin: 50px;">
</div>
</body>
</html>