How can I implement a simple phone mask in jQuery for an asp:TextBox control?

There has to be a simple jQuery solution for this. I've put in too much time trying to implement this on my own so I'm calling "uncle". I don't want a plug in, but just a way to implement a phone mask that will add parenthesis and or hyphens / dashes ("-") as needed.
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
These things start out sounding simple, but once you get into it you find differently.   Use a good plug in that already has the kinks worked out.  If you don't want to load a 2nd js file, then copy the code to your jquery file and place it after the jquery code.

http://igorescobar.github.io/jQuery-Mask-Plugin/

From there you can mask
$('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');

Open in new window


Otherwise, try building on this.
http://jsbin.com/pekuxawawo/edit?html,js,output
$('.phone').keyup(function(){
  var phoneMask;
  var strPhone = $(this).val();
  var phoneLen = strPhone.length;
  
 if(phoneLen >= 10){
        phoneMask = strPhone.slice(0, 3) + "-"+strPhone.slice(3,6)+"-"+strPhone.slice(6,10);
 }else{
   phoneMask = strPhone;
 }

  $('.phone').val(phoneMask);
});

Open in new window

Miguel OzSoftware EngineerCommented:
If you targeting modern browsers that supports HTML 5 then you can use the new "tel" type and define the pattern you wish to validate:
<input type='tel' pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' title='Phone Number (Format: +99(99)9999-9999)'> 

Open in new window

Check:
HTML5's Phone Number Input Type section for intro info.
For Sample patterns

Note: There is no need for Jquery for simple patterns.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The HTML5 input types only show validation and not masking.  I interpreted the question as entering or displaying from the server 1111111111 but showing 111-111-1111 or (111) 111-1111
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Michael SterlingWeb Applications DeveloperAuthor Commented:
I am still working on getting this put into place.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>I am still working on getting this put into place.
Are you waiting for different answers? or are you implementing something?

If you are waiting for different answers, what is your aversion to a plug in? These things have already gone through the wringer and are working.  If you don't want to have multiple js files, you shouldn't for production anyway and your solution should be to compress the plug in and place the script after jquery all on the same js file.

Once you do that, you just need to target a specific id or class. I find it is best to use a class. That way if you have multiple phone numbers your code will look like this:
<body>
<input class="phone" name="home_phone">
<script src="path/to/my-js-file.js"><script>
<script>
$(function(){
('.phone').mask('000-000-0000');
});
</script>
</body>

Open in new window


I provided you a very quick but not very good alternative. I wouldn't expect any of the Experts here to re-write what is already been done a few times over very well.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.