Updated March 27, 2023
Introduction to JQuery InputMask
An input mask is basically a string of characters that is helpful in indicating the format of valid input values. An input mask is used when it has to be ensured that the format of the input values is consistent. jQuery InputMask is a lightweight JavaScript / jQuery plugin which basically is helpful in creating input masks. An input mask provides input to the user by ensuring a predefined format.
This predefined format may help in masking dates, numerics, phone numbers, etc. This plugin is easy to use and supports multi-masking, DateTime masking, numeric masking as well as non-greedy masking. InputMask can be used as a Vanilla JavaScript plugin and also can run against jQuery and jqlite. It supports value formatting and validating without input element. This plugin provides the possibility to define aliases to hide complexity. With this plugin, we have the benefit of enabling, disabling and configuring many features using options.
Libraries and Types of InputMask in jQuery
InputMask plugin can run against different JavaScript libraries such as Vanilla JavaScript, jQuery, and jqlite.
Dependency Libraries
- dependencyLib (vanilla)
- dependencyLib.jquery
- dependencyLib.jqlite
Types of Data Masking
Following are the different types of masking types of JQuery.
1. Static Masks
This is the very basic masking where the mask is defined which remains unchanged during the input.
Example:
$(document).ready(function() {
$(selector).inputmask("aa-9999"); //static mask
$(selector).inputmask({ mask: "aa-9999" }); //static mask
});2. Optional Masks
We can define some parts in the mask as optional by using [].
Example:
$('#test').inputmask('(99) 9999[9]-9999');3. Dynamic Masks
These are those masks that can change during the input and can be defined using {}.
Example:
$(document).ready(function(){
$(selector).inputmask("aa-9{4}"); //static mask with dynamic syntax
$(selector).inputmask("aa-9{1,4}"); //dynamic mask
});4. Alternator Masks
Syntax for the alternator is similar to an OR statement.
5. Preprocessing Masks
Masks can be defined as functions that can allow preprocessing the resulting mask.
Example:
- sorting for multiple masks.
- retrieving mask definitions dynamically through ajax.
$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});6. JIT Masking
This refers to Just In Time Masking. The mask is visible only for the characters entered by users. Value can be either true or false or a threshold number.
Example:
Inputmask("date", { jitMasking: true }).mask(selector);Examples of JQuery InputMask
Let us now look at some of the examples to understand the concept of input masking and its implementation in a detailed manner.
Example #1
Following is a very simple example to demonstrate the power of jQuery InputMask.
Code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script>
$(document).ready(function() {
$("#contact").inputmask({ mask: "(999) 999-9999" });
$(":input").inputmask();
});
</script>
<style>
input {
font-family: monospace;
}
label {
display: block;
}
div {
margin: 0 0 1rem 0;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="cc">Card</label>
<input
id="cc"
type="text"
data-inputmask="'mask': '9999 9999 9999 9999'"
/>
</div>
<div>
<label for="date">Date</label>
<input id="date" data-inputmask="'alias': 'date'" />
</div>
<div>
<label for="contact">Contact</label>
<input id="contact" type="text" />
</div>
</form>
</body>
</html>Output:
- In this example, we have implemented masks for text input fields which accept a Card number, a Date and Contact
- In the screenshots, we can see that there is a predefined format available for all the three input fields which helps the user to easily enter fixed-length input.
Example #2
Here is another similar example to understand the implementation of input masking.
Code:
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<style>
body {
padding: 1%;
color: black;
font-weight: bold;
margin-left: 3rem;
}
div {
background-color: lightslategrey;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div>
<h2 style="color:maroon; text-align: center;">jQuery Input Mask</h2>
<br /><br />
<p>
<label>
ZIP Code
<input type="text" name="postal-code" />
</label>
</p>
<p>
<label>
Contact Number
<input type="text" name="contact-number" />
</label>
</p>
<p>
<label>
Policy Number
<input type="text" name="policy-number" />
</label>
</p>
<script>
$('input[name="postal-code"]').mask("S0S 0S0");
$('input[name="contact-number"]').mask("(00) 0000 0000");
$('input[name="policy-number"]').mask("00-00-0000-0000");
</script>
</div>
</body>
</html>Output:
In the given example, we are trying to specify certain formats for input fields, ZIP Code, ContactNumber and Policy Number using mask() feature. From the shown below output, we see that a format is defined for each of the three fields.
When the input data is entered, the input box field will take the data in the predefined format automatically.
In the above code:
- ZIP Code has the format defined as X1X 1X1.
- Contact Number has the format defined as (11) 1111 1111.
- Policy Number has the format defined as 11-11-1111-1111.
Example #3
Let us look at another similar example for jQuery input masking.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input {
font-family: monospace;
font-weight: bold;
}
label {
display: block;
}
div {
margin: 0 0 1rem 0;
}
.shell {
position: relative;
line-height: 1; }
.shell span {
position: absolute;
left: 3px;
top: 1px;
color: #ccc;
pointer-events: none;
z-index: -1; }
.shell span i {
font-style: normal;
color: transparent;
}
input.masked,
.shell span {
font-size: 14px;
font-family: monospace;
padding-right: 12px;
background-color: transparent;
text-transform: uppercase;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="date">Date</label>
<input id="date" type="text" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/(1[5-9]|2\d)" data-valid-example="05/18" />
</div>
<div>
<label for="code">Postal Code</label>
<input id="code" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked"
data-charset="_X_ X_X" type="text"
title ="Postal code should be 6 characters alphanumeric with format X1X 1X1" />
</div>
<div>
<label for="ip">IP Address</label>
<input id="ip" type="text" placeholder="XXX.XXX.XXX.XXX" class="masked" pattern=" /[0-9]/" />
</div>
</form>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>
</body>
</html>Output:
In this example, placeholders are used to show the masks. For all the three fields, formats are defined with certain patterns.
Conclusion
Input masking is a way of restricting data entered by the users into form fields by enforcing a predefined format. For this purpose, we can use jQuery input mask plugin which is very lightweight and is easy to implement. This plugin helps in fetching the data from the server without any mess and after the user receives it, the data is automatically masked by the plugin while entering into form fields. Input masking is helpful while dealing with data like cards, phone numbers, zip codes, dates and more.
Recommended Articles
This is a guide to JQuery InputMask. Here we discuss various libraries and types of InputMask in JQuery along with different examples and code implementation. You may also have a look at the following articles to learn more –
