Problem in MaskedEditExtender with javascript

[Abhi]

Hi All,

i have 3 textboxes for area Code,phone number and Extention and each have
MaskedEditExtender associated with it.

i want that when the length of first text box reaches it's maxlength , focus
will be set to next textbox automatically, means i want auto tabbed fields.
for which i created java script function and associated it with OnKeyDown
and OnKeyUp event of TextBox. but it's not working and when i remove the
MaskedEditExtender it workes fine, Can anyone please guide me.


heare is my aspx code(here i am showing only 1 textbox but i have 3 textbox):-

<asp:TextBox ID="txtAreaCode" runat="server" Width="25px" MaxLength="3"
size="4" ></asp:TextBox>
<AjaxToolKit:MaskedEditExtender ID="meeAreaCode" runat="server"
TargetControlID="txtAreaCode"
AutoComplete="false" Mask="999" MaskType="None"
InputDirection="LeftToRight"
ClearMaskOnLostFocus="False" PromptCharacter=" "
OnFocusCssClass="MaskedEditFocusNegative"
OnInvalidCssClass="MaskedEditFocusNegative">


event association:-

String areaCodeDown = "javascript:TabNext(this,'down', " +
this.txtAreaCode.MaxLength + ",)";
String areaCodeUp = "javascript:TabNext(this,'up', " +
this.txtAreaCode.MaxLength + ",'" + this.txtNumber.ClientID + "')";

this.txtAreaCode.Attributes["OnKeyDown"] = areaCodeDown;
this.txtAreaCode.Attributes["OnKeyUp"] = areaCodeUp;

Javascript function :-
var phone_field_length=0;
function TabNext(obj,event,len,next_field)
{

if (event == "down")
{

phone_field_length=obj.value.length;

}

else if (event == "up") {

if (obj.value.length != phone_field_length)
{

phone_field_length=obj.value.length;

if (phone_field_length == len)
{

var next=document.getElementById(next_field);

if(next != null)
next.focus();

}

}

}

}


Thanks