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: