Restricting a Field to Numbers OnlyThe 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
<SCRIPT TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com // 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; else 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 == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; } //--> </SCRIPT>
Now we can create a numbers only field using the
<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST> U.S. ZIP Code: <INPUT NAME="dollar" SIZE=5 MAXLENGTH=5 onKeyPress="return numbersonly(this, event)"> <INPUT TYPE=SUBMIT VALUE="go"> </FORM> This gives us this form: Here's what happens. When the user presses a key,onKeyPress 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 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. |