Checking Which Key Was Pressed

Before reading through this page, you might want to check out these solutions first:

onKeyPress allows you to check which key was pressed. With this useful information you can make decisions on whether or not to allow the key press event. Unfortunately, MSIE and Netscape pass along the key information in different ways. To get around that problem you can use a function which tests which method is used and retrieve the information accordingly. This getkey() function does just that:

<SCRIPT TYPE="text/javascript">
<!--
function getkey(e)
{
if (window.event)
return window.event.keyCode;
else if (e)
return e.which;
else
return null;
}
//-->
</SCRIPT>

In its simplest use, getkey() simply returns the numeric code for the key which was pressed. So, for example, you could display the code in the window status bar, a useful technique if you've forgotten which codes go with which keys.

<INPUT onKeyPress="window.status = getkey(event)">

This gives us this form:

Most of the time you'll want to use onKeyPress to restrict which characters can be typed in the field. To simplify the process of checking if the typed character is one of an acceptable group of characters we can use the following function. goodchars() uses getkey() so make sure you copy both of them into your page.

<SCRIPT TYPE="text/javascript">
<!--
function goodchars(e, goods)
{
var key, keychar;
key = getkey(e);
if (key == null) return true;
// get character
keychar = String.fromCharCode(key);
keychar = keychar.toLowerCase();
goods = goods.toLowerCase();
// check goodkeys
if (goods.indexOf(keychar) != -1)
return true;
// control keys
if ( key==null || key==0 || key==8 || key==9 || key==13 || key==27 )
return true;
// else return false
return false;
}
//-->
</SCRIPT>

goodchars() takes two arguments: the event object and a string of acceptable characters. So, for example, we could allow only numbers in the field with code like this:

<INPUT NAME=INT onKeyPress="return goodchars(event,'0123456789')">

Which gives us this form:

Be sure to put the word return before the call to goodchars() or the event won't be cancelled if the user presses a wrong key. goodchars() is case-insensitive. If you allow "X" you also automatically allow "x". goodchars() allows the standard editing keys such as backspace and delete.