Idocs Guide to HTML

Numbers Only: Jumping at the Decimal Point

In the previous page we showed how to restrict a field to just numbers. In this field we show how to use two fields to split the number on the decimal place. Unfortunately, JavaScript currently lacks the properties needed to restrict decimal places within a single field. However, we can split the data into two fields -- numbers before the decimal and numbers after. When the user hits the decimal point, the cursor jumps from one field to the next. In the second field we use the MAXLENGTH attribute to restrict the number of decimal places.

First, copy the script from the previous page into the <HEAD> section of your document. Copy it exactly as-is without making any changes. Now, we can create two number-only fields split on the decimal. The first field is for the numbers before the decimal place. We use an onKeyPress attribute like in the previous example, but now we add an argument to the numbersonly(). The third argument is the name of the field to jump to when the user presses decimal. In this case, the field is name cents. The cents field itself uses the MAXLENGTH attribute to limit the field to two decimal places.

<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
price: 
   <INPUT NAME="dollar" SIZE=5
    onKeyPress="return numbersonly(this, event, 'cents')"> <B>.</B>
   <INPUT NAME="cents" SIZE=2 MAXLENGTH=2 
    onKeyPress="return numbersonly(this, event)">
</FORM>

This gives us this form:

price: .
Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.