Mask Textbox view for a phone number

Question

i am trying to format a text box so that when the users can type in a phone number and it would automatically put it in the following format :[phone]

i tried using the MaskedEditExtender, it works but it does the complete opposite of what i need.

when i click on the field it shows the correct format, but once i mouse out it still only shows 9999999999

how can i do it so that the user ONLY types in numbers and it puts dashes and parentheses where it's supposed to automatically(which it does now), but keep the format when i click out of it.

<asp:TextBox ID="txtSuperPhone" runat="server" CssClass="myinputstyle"  />
    <asp:MaskedEditExtender ID="mskSuperPhone" runat="server" TargetControlID="txtSuperPhone" Mask="[phone]"/>

Answer 1

To answer your question, you have to set the "ClearMaskOnLostFocus" to false on the extender for the mask to show all the time.

That being said....

I strongly suggest that you use the jquery alternative.

http://digitalbush.com/projects/masked-input-plugin/

The reason I say this is because the maskededitextender does not work in safari.

Answer 2

Try this

The propoerty "ClearMaskOnLostFocus" must be false.

<asp:MaskedEditExtender ID="mskSuperPhone" runat="server"
                   TargetControlID="txtSuperPhone"
                   ClearMaskOnLostFocus ="false"
                   MaskType="None"
                   Mask="[phone]" 
                   MessageValidatorTip="true"
                   InputDirection="LeftToRight"
                   ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>