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
