|
The phone keypad is built as a 3x4 table, mimicking a real phone faceplate. Each cell of the table contains an INPUT button. Let's look at one of the buttons, say 4:
<INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI " onclick="numPressed(4)">
The button specification includes the VALUE of the button (the text printed on it), its NAME, and its onclick event handling. Each button is sending a number between 0 to 11. The key itself is sent for keys 0 to 9. The asterix (*) button is sending a value of 10 and the pound sign (#) is sending a value of 11. The whole table is positioned within a FORM element, to facilitate the buttons inside. Here is the form:
<FORM NAME="phonePlate">
<TABLE BORDER=2WIDTH=150 HEIGHT=60CELLPADDING=1 CELLSPACING=5>
<TR>
<TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 1 "
onclick="numPressed(1)"></TD>
<TD><INPUT NAME="button2" TYPE="BUTTON" VALUE=" 2 ABC "
onclick="numPressed(2)"></TD>
<TD><INPUT NAME="button3" TYPE="BUTTON" VALUE=" 3 DEF "
onclick="numPressed(3)"></TD>
<TD ROWSPAN="4" VALIGN="top" NOWRAP><SPAN ID="foundSoFar"></SPAN></TD>
</TR>
<TR>
<TD><INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI "
onclick="numPressed(4)"></TD>
<TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 5 JKL "
onclick="numPressed(5)"></TD>
<TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 6 MNO"
onclick="numPressed(6)"></TD>
</TR>
<TR>
<TD><INPUT NAME="button7" TYPE="BUTTON" VALUE=" 7 PRS"
onclick="numPressed(7)"></TD>
<TD><INPUT NAME="button8" TYPE="BUTTON" VALUE=" 8 TUV "
onclick="numPressed(8)"></TD>
<TD><INPUT NAME="button9" TYPE="BUTTON" VALUE=" 9 WXY"
onclick="numPressed(9)"></TD>
</TR>
<TR>
<TD><INPUT NAME="button*" TYPE="BUTTON" VALUE=" * "
onclick="numPressed(10)"></TD>
<TD><INPUT NAME="button0" TYPE="BUTTON" VALUE=" 0 "
onclick="numPressed(0)"></TD>
<TD><INPUT NAME="button#" TYPE="BUTTON" VALUE=" # "
onclick="numPressed(11)"></TD>
</TR>
</TABLE>
</FORM>
Learn more about implementing this buttons in Column 57, The Doc Dialer, Part I.
People who read this tip also read these tips:
Look for similar tips by subject:
| 
