How to format a phone number with jQuery including iOS

Question

I'm currently displaying phone numbers like 2124771000. However, I need the number to be formatted in a more human-readable form, for example: (212)-477-1000. Here's my current HTML:

<p class="phone">2124771000</p>

I am using How to format a phone number with jQuery article and it works well in windows, but it's not working in iOS.

I want JavaScript that works in both platform as well as iOS.

Thanks in advance

Answer 1

You don't really need jquery (or js at all in fact) to do this. If the phone numbers are being inputted, then you can add a HTML5 pattern to the input box to ensure users follow the suggested pattern as in the following example:.

 form { width:60%; margin: 0 auto; } input[type="tel"] { border: 1px solid #ddd; padding: 4px 8px; } input[type="tel"]:focus { border: 1px solid #000; } input[type="submit"] { font-weight: bold; padding: 4px 8px; border:1px solid #000; background: #3b5998; color:#fff; } 

 <form onsubmit="alert('Submitted'); return false;"> <h2>US Phone Number Validation</h2> <label for="phonenum">Phone Number (xxx-xxx-xxxx): </label> <input type="tel" id="phonenum" required pattern="\\d{3}[\\-]\\d{3}[\\-]\\d{4}"/> <input type="submit" value="Submit"> </form> 

There is an article displaying various types of phone patterns here