We help IT Professionals succeed at work.

How do I auto insert dashes in a phone number?

5,201 Views
Last Modified: 2013-11-07
I have a request to "automatically add dashes" to an input field designated to hold a phone number. How do I accomplish this in C# and / or the markup? Should I try to use a regular expression validator?
Comment
Watch Question

Commented:
You can use multiple test boxes and then while concatenating add a hifen

Commented:
what I meant was 'text' boxes
Michael SterlingWeb Applications Developer

Author

Commented:
i can give that a shot,...is there something wrong with the code i've attached? the OnTextChanged event never seems to fire?
<li>
                            <asp:Label runat="server" Text="Phone number:" AssociatedControlID="txtPhone" />
                            <asp:TextBox ID="txtPhone" runat="server" Width="100" MaxLength="12" FieldName="Phone" OnTextChanged="txPhone_TextChanged"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="txtPhone" Display="Dynamic"
                                ErrorMessage="Please enter your phone number">*</asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="regPhone" ControlToValidate="txtPhone" Display="Dynamic"
                                runat="server" ValidationExpression="\d{3}\d{3}\d{4}"> Phone number must be in the format of 9999999999.
                            </asp:RegularExpressionValidator>
                        </li>


    public void txPhone_TextChanged(object sender, EventArgs e)
    {
        if ( (txtPhone.ToString().Length == 3) || (txtPhone.ToString().Length == 7))
            txtPhone.Text = txtPhone.Text.ToString() + "-";
    }

Open in new window

Commented:
try txtPhone.text.ToString() instead.
Michael SterlingWeb Applications Developer

Author

Commented:
yeh i tried that and it's not working as i expect it to. it never fires the event. i'm expecting that every time the contents are changed this event should fire but it never does????
public void txPhone_TextChanged(object sender, EventArgs e)
    {
        if ((txtPhone.Text.ToString().Length == 3) || (txtPhone.Text.ToString().Length == 7))
            txtPhone.Text = txtPhone.Text.ToString() + "-";
    }

Open in new window

Michael SterlingWeb Applications Developer

Author

Commented:
when i set the AutoPostBack property of the textbox to true. it only checks once the user leaves the checkbox.

Commented:
you should not use codebehind for such task
use javascript onchange  function
Daniel Van Der WerkenIndependent Consultant
CERTIFIED EXPERT

Commented:
It will never fire no matter what.  You really don't want to do it that way anyway.  Try this:
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
      <title>CK Editor Example</title>
      <script type="text/javascript">
          function setHyphens() {
              var pt = document.getElementById("_prvPhone");
              var s = "0";
              s = pt.value;
              if ( s.length > 1 && ( s.length == 3 || s.length == 7 ) ) {
                  pt.value += '-';
              }
          }
      </script>
   </head>
   <body>
      <form>
         <div>
            <input type="text" id="_prvPhone" onkeydown="setHyphens();" />
         </div>
      </form>
   </body>
</html>
Michael SterlingWeb Applications Developer

Author

Commented:
@fryezz, oh that sounds like a good idea. any examples?
Daniel Van Der WerkenIndependent Consultant
CERTIFIED EXPERT

Commented:
Well, it will fire when you hit the enter key, but it won't fire on text change like you expect.
Michael SterlingWeb Applications Developer

Author

Commented:
@Dan7el: yep...
Michael SterlingWeb Applications Developer

Author

Commented:
@Dan7el: I'm looking for something that will fire each time the text is changed in the text box, while i'm still in the text box. not after i leave it....

Commented:
check this url for elegent formating, or customize it to have only dashes

http://www.kodyaz.com/articles/javascript-phone-format-phone-number-format.aspx
Web Applications Developer
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Michael SterlingWeb Applications Developer

Author

Commented:
thanks again.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions