Change Focus for TextBoxes using Javascript

In most of the real time project there will be requirement to change focus of the TextBox from one to another dynamically, instead of clicking the TextBoxes. The ideal example in this case would be Phone Number Text Boxes in the US format(000-000-0000). Consider there were three TextBoxes. It wil be irritating for the end user to click each text box and then type numbers.

So here, on every keyboard press event ("onkeypress") we capture the event and check for the length of the TextBox in the changeFocus() Javascript function. Again the browser compatibility issue raises its head and its handled in its own way. This is so simple to implement. Here is the code snippet.

Javascript Function:

//Change Focus for the Phone TextBox

function changeFocus(textbox1,textbox2)
{
var browserName=navigator.appName;
if (browserName=="Netscape")
{
if(textbox1.value.length >= 2)
{
textbox2.focus();
}
}
else if(browserName=="Microsoft Internet Explorer")
{
if(textbox1.value.length == 3)
{
textbox2.focus();
}
}
else
{
if(textbox1.value.length == 3)
{
textbox2.focus();
}
}
return true;
}

//End of Change Focus for the Phone TextBox


The ASP.NET(Vb) File Code:-

You can add this code in the Load Event of the Page.

Me.TxtCellPhone1.Attributes.Add("onkeypress", String.Format("javascript:return changeFocus({0},{1});", Me.TxtCellPhone1.ClientID, Me.TxtCellPhone2.ClientID))
Me.TxtCellPhone2.Attributes.Add("onkeypress", String.Format("javascript:return changeFocus({0},{1});", Me.TxtCellPhone2.ClientID, Me.TxtCellPhone3.ClientID))

Here no need to add an event for TxtCellPhone3 TextBox.

Let me know your Thoughts. Happy Coding.