4 demos of input masking solution by using JavaScript

What is input masking library?

In certain scenarios, you may require enabling the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format.

The input-masking library enables you making an input field masked with a specific data entry format.

This JavaScript library for masking input fields will also make entries of spaces, dashes etc automatically. So, the users may just focus on entering the numbers or alphabets.  This may be particularly useful where a large number of entries are required by data entry operators using web interface.

Have a look at the demos in the following section along with learning to set up this library in your web pages.

A demo of input masking for credit card numbers

In this demo, a general format for the credit card is given. Try entering numbers and alphabets without entering the spaces. You will see, the spaces are added automatically:

input masking

See online demo and code

The simple markup:

<ul>

<li>

  <label for="cc">Credit Card Number</label>

  <input id="cc" type="tel" name="ccnumber" class="masked" title="Enter the 16 number credit card">

</li>

</ul>

Include the reference of input-mask library:

<script src=”js/masking-input/masking-input.js” data-autoinit=”true”></script>

A little CSS is also used that you can see in the demo page.

A demo of Canadian Zip code

The Canadian zip code is the mix of alpha-numeric, so this is an interesting case for input masking. The placeholder for entering the Canadian zip code is made in a way that a user knows if a character is required or number. See the demonstration online:

input masking Canadian zip

See online demo and code

You saw, rather than using the X in placeholder, I used A1B 2C3, so the user knows the required format. The user does not need to enter the space, just keep entering the code in correct format.

The markup for creating the Canadian zip code input masked field:

<ul>

<li>

  <label for="zipca">Enter Canadian Zip Code</label>

  <input id="zipca" type="text" name="zipcodeca"  class="masked" data-charset="_X_ X_X" title="Enter Canadian zip code">

</li>

</ul>

Again, you just need to include the JS library at the end of the script (before the </body> closing tag).

A demo of telephone number with parenthesis

In this example, the telephone field is masked where the parenthesis will be managed by the script itself.

input masking phone

See online demo and code

The markup:

<li>

  <label for="tel">Enter Phone</label>

  <input id="tel" type="tel" name="phone" class="masked" title="Enter number without parenthesis">

</li>

How to customize the input masking for other fields?

The important thing to be noticed in all above examples is defining the pattern. For example, in the above telephone example, the following pattern is set in the input field:

pattern=”\(\d{3}\) \d{3}\-\d{4}

Now, if you want to allow the users entering four digits in parenthesis rather 3, then just make it 4.  For showing how to customize the input fields, I also added another dash, so this is how the pattern looks:

pattern=”\(\d{4}\) \d{3}\–\d{4}

You also need to make changes in the placeholder as follows:

placeholder=”(XXXX) XXX–XXXX”

Run the demo online by clicking the image or link below and enter the numbers and see how it is customized:

input masking phone customized

See online demo and code

The markup:

<li>

  <label for="tel">Enter Phone</label>

  <input id="tel" type="tel" name="phone"  class="masked" title="Enter number without parenthesis">

</li>

Similarly, you may make the changes for adding the numbers or characters in the required format.

For full documentation and downloading this library, follow this link.

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!