Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Mail Systems
Eclipse Documentation

How To Guides
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Problem Solutions
Privacy Policy




Restricting a Field to Numbers Only

The previous page demonstrated a technique for restricting form field inputs to just letters and numbers. This page shows a technique for restricting the field to just numbers. The script also allows you to automatically jump to the next field if the user presses the decimal key.

First, copy this script exactly as-is into the <HEAD> section of your page:

<SCRIPT TYPE="text/javascript">
// copyright 1999 Idocs, Inc.
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
var key;
var keychar;

if (window.event)
   key = window.event.keyCode;
else if (e)
   key = e.which;
   return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || 
    (key==9) || (key==13) || (key==27) )
   return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
   return true;

// decimal point jump
else if (dec && (keychar == "."))
   return false;
   return false;


Now we can create a numbers only field using the onKeyPress attribute. For our first example, we'll create a field which accepts five digits as for a United States ZIP Code. Set the onKeyPress attribute exactly like it is here:

U.S. ZIP Code: 
   onKeyPress="return numbersonly(this, event)">

This gives us this form:

U.S. ZIP Code:
Here's what happens. When the user presses a key, onKeyPress calls the numbersonly() script. numbersonly() takes two arguments: this (the input field itself), and event (the object some browsers use to check which key was pressed). numbersonly() checks if the key pressed was a number or one of the control characters such as backspace or delete. numbersonly() returns true if the key is acceptable, false if it's not. In turn, onKeyPress return the true of false value (that's why it's important to use return in the attribute) and the key is cancelled or allowed accordingly.

In the next page we'll show you how to have the cursor automatically jump to the next field when the user presses the decimal point thus creating a two-part numeric field.

  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire