Javascript Format Phone Number While Typing

The phoneinput.js Javascript plugin which allows the site users to automatically format the phone number in the text field while typing. This is a nice way to implement a phone number field on your website contact or other important forms.

It provides Javascript functionality to dynamically format phone number input fields as you type. It also comes with validation and allows only numbers in the field. It formats the input text to your desired formate as you type it.

How to Create Formatted Phone Number with Javascript

To add this plugin into your website, You need to add one Javascript file or copy the code from the file and add into the existing one.

<script src="js/phoneinput.js"></script>

If you want to style it like the demo, Make sure to add the styles.css

<link rel="stylesheet" href="styles.css">

Next, you need to add the input type text field and make sure to define ID phoneInputCreate a normal input field on the web page.

<input id="phoneInput" required autocomplete="off" type="text">

If you want to add a placeholder with nice animation. Like if someone mouse clicks in the filed for typing, it will animate the placeholder text then you simply need to define following HTML just right below the input field.

<span class="highlight"></span>
<span class="bar"></span>
<label>Phone</label>

Change Phone number formate

The plugin also allows changing the phone number formate. The default format is  (051) 232-3232 but by modifying the const value in the javascript file, you can change it easily.

const phoneFormat = '({0}{1}{2}) {3}{4}{5}-{6}{7}{8}{9}';

That’s It. Its simple and easy plugin and you can quickly add it into your website.