Categories:
Partners

Determining which key is pressed

Getting a knee-jerk reaction from the keyboard/script is fun and all, but definitely not practical by itself. What we need is to take the idea further, and learn how to detect when a particular key is pressed. The key is to probe the "event" object in NS6/Firefox, which contains essential information about an event when it occurs, in this case, the keyboard related events.

Keyboard related properties of the Event object

Properties Description
altKey, ctrlKey, shiftKey Boolean properties that indicate whether the Alt, Ctrl, Meta, and Shift keys were pressed at time of the event.
metaKey Boolean property that indicate whether the Meta key was pressed at the time of the event. NS/Firefox only.
charCode Property indicating the Unicode for the key pressed. Use String.fromCharCode(charCode) to convert code to string. NS/Firefox only.
keycode Property indicating the Unicode for the key pressed. Use String.fromCharCode(keyCode) to convert code to string.
type A string indicating the type of event, such as "mouseover", "click", etc.
which Legacy property indicating the Unicode for the key pressed. Identical to "charCode", except this property works in NS4 as well. NS/Firefox only.

Green properties- NS/ Firefox exclusive.

As you can see, some properties of the Event object for the keyboard are shared (those that are white), while others are exclusive to either Firefox. However, they all serve the same function. You're probably still confused at this point, but nothing a few examples can't help clear up.

In the first example, I'll detect and alert the Unicode of any key pressed:

<script type="text/javascript">
function displayunicode(e){
var unicode=e.keyCode? e.keyCode : e.charCode
alert(unicode)
}
</script>
<form>
<input type="text" size="2" maxlength="1" onkeyup="displayunicode(event); this.select()" />
</form>

Example: Enter a key below:

This alerts the unicode of the character pressed. But of course it'd be much better if we can find out the actual key that was pressed. This is where String.fromcharCode() is useful:

<script type="text/javascript">
function textsizer(e){
var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode
var actualkey=String.fromCharCode(unicode)
if (actualkey=="a")
document.body.style.fontSize="120%"
if (actualkey=="z")
document.body.style.fontSize="100%"
}
document.onkeypress=textsizer
</script>

Example: Set focus on the document in general first (not the text box above), then try pressing "a" or "z" to toggle the font size of the document.

In this example, since I'm binding the "onkeypress" event to the document programmatically, the "event" object is being indirectly passed into the "textsizer" function. Due to this, I need to catch the event object via the variable "evtobj."

Detecting if special keys such as "Shift were pressed

You can also detect if a special keys such as "Shift" or "Ctrl" key was held down while pressing a regular key:

<script type="text/javascript">
function detectspecialkeys(e){
var evtobj=window.event? event : e
if (evtobj.altKey || evtobj.ctrlKey || evtobj.shiftKey)
alert("you pressed one of the 'Alt', 'Ctrl', or 'Shift' keys")
}
document.onkeypress=detectspecialkeys
</script>

Ok, time to look at perhaps the most sensible use of the user's keyboard in JavaScript- form validation.