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: