Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by whitelisting our website.

Auto format or Masking phone number or te input field

Auto format or Masking phone number or te input field

Just take a tel input field, you can take text input also. But as I’m working with phone numbers, I am using tel input as below


<label for=”#phone-number”>Phone number<span class=”required”>*</span></label>
<input id=”phone-number” type=”tel” value=”” name=”phone_number” aria-label=”Please enter your phone number” placeholder=”ex. 1(111)-111-1111″ onkeyup=”phoneMask(this) “>


We need to write a few lines of JavaScript code to mask or automatically format according to our example in the placeholder.


function phoneMask(ths) {
var num = $(ths).val().replace(/\D/g,”);
$(ths).val(num.substring(0,1) + ‘(‘ + num.substring(1,4) + ‘)’ + num.substring(4,7) + ‘-‘ + num.substring(7,11));


Now refresh and test, and share this article if this helps you..







Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Wordpress Social Share Plugin powered by Ultimatelysocial

Remote PHP, Laravel, LAMP developer experience in Oracle Service Cloud

Hi, You can subscribe to get emails
about technology hacks, tools and many more.