Mask Textbox view for a phone number

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 :(999)999-9999

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="(999)999-9999"/>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 2

Try this

The propoerty “ClearMaskOnLostFocus” must be false.

<asp:MaskedEditExtender ID="mskSuperPhone" runat="server"
                   TargetControlID="txtSuperPhone"
                   ClearMaskOnLostFocus ="false"
                   MaskType="None"
                   Mask="(999)999-9999" 
                   MessageValidatorTip="true"
                   InputDirection="LeftToRight"
                   ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0