What is input masking library?
In certain scenarios, you may require enabling the visitors for entering only the specific data in a certain format. For example, zip code or credit card entries are in specific patterns 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 the 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:
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:
A little CSS is also used, see the complete code below:
<!doctype html> <html> <head> <link rel="stylesheet" href="css/masking-input/masking-input.css"/> <style> /* additional styles */ li {line-height: 2; clear: both;} label {display: inline-block; width: 200px;} .shell span {color: pink;} li {font-family: helvetica; font-size: 0.93rem;} </style> </head> <body> <ul> <li> <label for="cc">Credit Card Number</label> <input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 number credit card"> </li> </ul> <script src="js/masking-input/masking-input.js" data-autoinit="true"></script> </body> </html>
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.
The code:
<!doctype html> <html> <head> <link rel="stylesheet" href="css/masking-input/masking-input.css"/> <style> /* additional styles */ li {line-height: 2; clear: both;} label {display: inline-block; width: 200px;} .shell span {color: pink;} li {font-family: helvetica; font-size: 0.93rem;} </style> </head> <body> <ul> <li> <label for="cc">Credit Card Number</label> <input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 number credit card"> </li> </ul> <script src="js/masking-input/masking-input.js" data-autoinit="true"></script> </body> </html>
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 the correct format.
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.
Full code for this example:
<!doctype html> <html> <head> <link rel="stylesheet" href="css/masking-input/masking-input.css"/> <style> /* additional styles */ li {line-height: 2; clear: both;} label {display: inline-block; width: 200px;} .shell span {color: pink;} li {font-family: helvetica; font-size: 0.93rem;} </style> </head> <body> <ul> <li> <label for="tel">Enter Phone</label> <input id="tel" type="tel" name="phone" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis"> </li> </ul> <script src="js/masking-input/masking-input.js" data-autoinit="true"></script> </body> </html>
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:
Now, if you want to allow the users entering four digits in parenthesis rather than 3, then just make it 4. To show how to customize the input fields, I also added another dash, so this is how the pattern looks:
You also need to make changes in the placeholder as follows:
The markup:
<ul> <li> <label for="tel">Enter Phone</label> <input id="tel" type="tel" name="phone" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis"> </li> </ul>
Similarly, you may make the changes by adding the numbers or characters in the required format.
For full documentation and downloading this library, follow this link.