I just started using the mask control.
I have it working exactly the way I want with date but can't get the same behavior with Phone.
Date Mask:
<AjaxControlToolkit:MaskedEditExtender
ID="mskTbTicketOpenedDate"
runat="server"
TargetControlID="tbTicketOpenedDate"
Mask="99/99/9999"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Date"
ErrorTooltipEnabled="True" />
Date Mask Validator:
<asp:RequiredFieldValidator
ID="rfValTbTicketOpenedDate"
runat="server"
ControlToValidate="tbTicketOpenedDate"
Display="Dynamic"
ErrorMessage="required!<br />" />
<AjaxControlToolkit:MaskedEditValidator
ID="mskValTbTicketOpenedDateInvalid"
runat="server"
ControlExtender="mskTbTicketOpenedDate"
ControlToValidate="tbTicketOpenedDate"
IsValidEmpty="false"
InvalidValueMessage="Date is invalid<br />"
Display="Dynamic" />
Breaking out the required field validation helped me get the date textbox to behave the way I need.
Just positioning validation messages and such.
Behavior I like here is that
TextBox has no mask to start (focus off of textbox).
When you put the cursor in the textbox or the textbox gets focus then the mask shows up: __/__/____.
As you type the underscore placeholders dissapear but the '/' chars stay in place.
And finally, this is key, when you have a correct date and take the focus away from the text box the dashes stay in place.
I just realized that is because the date mask seems to fill in the blank spaces with the current date.
I cannot get this behavior with a phone. Granted there is no phone mask type. But can anyone help me get this to work?
Here is the phone code:
<AjaxControlToolkit:MaskedEditExtender
ID="mskTbPhone"
runat="server"
TargetControlID="tbPhone"
Mask="999-999-9999"
ClearMaskOnLostFocus="true"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="None"
ErrorTooltipEnabled="True" />
I have tried MaskType set to number but it doesn't change the behavior.
Right now the dashes dissapear when I take the focus off of the phone textbox.
One thing I noticed with date is that if it is incomplete when it loses focus it fills in the rest with the current date values.
Since there is no Phone mask type that behavior is not built in.
Does anyone know how to set a default behavior so if you type in 55 in would automatically finish? 555-55-5555
And when you take the focus off it would keep the dashes.
But if the textbox is empty I want with no focus the mask should dissapear completely.