Quick Phone Numbers Input Mask jQuery Plugin – jquery-input-mask-phone-number.js

610

Quick Phone Numbers Input Mask jQuery Plugin – jquery-input-mask-phone-number.js
Do you wanna apply masking on HTML Input field for phone numbers so that you get well formatted phone numbers while user filling online form. Then In this post I am going to share simple lightweight quick phone numbers input mask jQuery Plugin which you can use with your phone number input box to force apply formatted phone numbers.

Integrate Phone Numbers Input Masking

Libraries

Add latest jQuery and jquery-input-mask -phone-number files.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="jquery-input-mask-phone-number.min.js"></script>

HTML

sample input field with USA phone number masking.

<input type='text' id='yourphone' />

JS

The jquery-input-mask -phone-number syntax is pretty simple. First,you input your selector, followed by the .usPhoneFormat and then as a parameters you have to put the mask that you want the plugin to apply on the form field.

//(xxx) xxx-xxxx format code
$(document).ready(function () {
    $('#yourphone').usPhoneFormat({
        format: '(xxx) xxx-xxxx',
    });   
});
 
OR
//xxx-xxx-xxxx format code
$(document).ready(function () {
    $('#yourphone').usPhoneFormat({
        format: 'xxx-xxx-xxxx',
    });   
});
 
//Default xxx-xxx-xxxx  
$(document).ready(function () {
    $('#yourphone').usPhoneFormat();   
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.