I have done a small coding with help of jQuery and develop a <input/> with telephone formatting effect. This <input> can format it’s values like telephone numbers after inputting the numbers automatically. First, I would like to confirm that the telephone formatting is only written with few lines of jQuery and without help of any plugin.

Introduction

I always wonder for a input type which can be formatting as telephone numbers automatically. HTML 5 introduces some new <input> types but some of them are only useful for validating. Most of them are similar and not any difference in visual/display. Here, we are doing at visual part of <input>

input-phone-number-auto-formatting-as-user-types-in-jquery-javascript

HTML 5 <input> type “tel”

<input> elements of type “tel” i.e <input type="tel"> are used to let the user enter and edit a telephone number. Unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
So, here we use  (xxx) xxx-xxxx number format for displaying a telephone number in <input type="text">. You can use this in <input type="tel"> also. We will assign a class “phone_format” in this telephone <input>.

JQuery codes of visual telephone formatting

Now, it’s time to share the awesome code by which I have updated that <input> values in telephone formatting. I have also added same placeholder format to hint users.

function phoneFormatter() {
 $('input.phone_format').attr({ placeholder : '(000) 000-0000' });
  $('input.phone_format').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length >= 5 && number.length < 10) { number = number.replace(/(\d{3})(\d{2})/, "$1-$2"); } else if (number.length >= 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{3})/, "($1) $2-$3"); 
	}
    $(this).val(number)
    $('input.phone_format').attr({ maxLength : 17 });    
  });
};

$(phoneFormatter);

Now, after applying the class “phone_format” to any <input> you can achieve the telephone format effect.

Result / Demo

view demo

That’s it..!!

That’s all, I hope you enjoyed this article. Please feel free to comment and share your thoughts/ideas. Thanks for reading!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajGameJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,angle brackets,auto control,auto format input,custom input,custom input format,elements,free open source,gaming,graphical user interface,input attribute placeholder,input element,INPUT elements,input placeholder,input tel,input telephone format,input type text,input types,iPhone,javascript,javascript functions,jquery,line tag,mobile,open source javascript,page elements,phone format,phone formater jquery,plugin,smartphone,technologyI have done a small coding with help of jQuery and develop a <input/> with telephone formatting effect. This <input> can format it's values like telephone numbers after inputting the numbers automatically. First, I would like to confirm that the telephone formatting is only written with few lines of...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.