HTML >> Forms >> <INPUT ...> >> <INPUT onKeyPress="...">

Canceling the Key Press

<INPUT onKeyUp="...">

Checking Which Key Was Pressed

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:

<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:

Canceling the Key Press

<INPUT onKeyUp="...">

Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.