I've noticed on some sites when you are entering a phone # the cursor moves to the next box automatically... what is this called and does anyone know how to do it?
Printable View
I've noticed on some sites when you are entering a phone # the cursor moves to the next box automatically... what is this called and does anyone know how to do it?
When you say it moves to the next box automatically do you mean after a certain number of characters are entered or if the user presses tab or something else
yes, after a certain number of characters are entered the cursor would move to the next box.
This will have to be done client side as you can't postback to the server after every keypress for obvious reasons.
Something along the lines of
1. Detect keypress
2. If(textbox length > 3) set focus to next textbox.
this is what i found and it works.
Code:<script language="javascript" type="text/javascript">
// <!CDATA[
function Tab(currentField, nextField)
{
// Determine if the current field's max length has been reached.
if (currentField.value.length == currentField.maxLength)
{
// Retreive the next field in the tab sequence, and give it the focus.
document.getElementById(nextField).focus();
}
}
// ]]>
</script>
Code:<tr>
<td style="width: 83px; height: 33px;">
<asp:TextBox ID="TextBoxPhoneOne" runat="server" Width="40px" onkeypress="Tab(this, 'TextBoxPhoneTwo');" MaxLength="3"></asp:TextBox></td>
<td style="width: 100px; height: 33px;">
<asp:TextBox ID="TextBoxPhoneTwo" runat="server" Width="27px" onkeypress="Tab(this, 'TextBoxPhoneThree');" MaxLength="3"></asp:TextBox>
</td>
<td style="width: 100px; height: 33px;">
<asp:TextBox ID="TextBoxPhoneThree" runat="server" Width="54px" MaxLength="4"></asp:TextBox></td>
</tr>