jQuery Inputmask

Last Updated : 24 Sep, 2024

jQuery Inputmask is a JavaScript library that allows developers to apply masks to input fields. Input masks ensure that user input follows a predefined format, making this plugin especially useful for date inputs, numeric fields, phone numbers, emails, and more. Inputmask provides a rich set of functionalities, making it more versatile than other masking plugins.

The mask plugin is used for the same purpose. But here Inputmask plugin provides some extra features and methods that make it more useful.

Why Use Inputmask?

Inputmask is particularly useful for:

Ensuring users input data in a specific format, such as dates or phone numbers.
Reducing errors and ensuring data consistency across input fields.
Enhancing the user experience by making data entry easier and more intuitive.

This plugin can be applied to various types of input fields, such as:

Dates: dd/mm/yyyy
Phone numbers: (999) 999-9999
Email addresses: {A-Za-z0-9}@gmail.com
IP addresses: 255.255.255.255
Numeric fields: 999,999.99

How to Use jQuery Inputmask

Before you can use Inputmask, you must include the plugin in your project. Here's the CDN link for the Inputmask library:

CDN link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

Note: This link must be included in the index page to make the jQuery input mask functionalities work.

Following are some ways to use Inputmask:

1. Using data-inputmask Attribute

You can define the mask directly in the HTML using the data-inputmask attribute:

<input data-inputmask = " 'mask' : 'xx-xxxxxxx'" />

$(document).ready(function() {
  $(":input").inputmask();
}

2. Using Inputmask Plugin on a Target Element

You can directly apply the mask to an element using a jQuery selector. For example:

$("selector").inputmask("xx-xxxxxxxx");

3. Using the Inputmask Class

You can also use the Inputmask class to define and apply masks:

var Mask = new Inputmask("XXXX-XXXX");
Mask.mask("selector");

Types of Input Masking

jQuery Inputmask provides several types of masking for different use cases:

1. Static Masking

This type of masking remains fixed and does not change during input. For instance:

$(document).ready( function() { 
    $("selector").inputmask("xx-xxxxxxxx");
});

2. JIT Masking (Just-in-Time Masking)

JIT masking applies the mask only as the user types. Use the jitMasking option to enable this:

Inputmask("Password", { jitMasking : true }).mask("SELECTOR");

3. Alternator Masking

When you have multiple formatting options (e.g., date or time), use alternator masking:

$(document).ready( function() {
  $("selector").inputmask("XX/XX/XX | XX-XX-XX");
});

4. Optional Masking

You can mark parts of the mask as optional using square brackets [ ]. For example:

Inputmask( '99/99/99[99]' ,).mask("selector");

5. Preprocessing Masking

Preprocessing allows you to generate a custom mask before applying it:

Inputmask( { mask : function() {
   return Resulting mask;
}).mask("selector");

6. Dynamic Masking

Dynamic masking lets you define a flexible mask with variable length using {} brackets. For example:

Inputmask( "9{1,5}-9{1,5}").mask("selector");

Common Inputmask Methods

The Inputmask plugin offers a variety of methods to manage masks:

1. mask()

This method is used to apply the mask to a specific element:

Inputmask ( {mask: "XX-XXXX-XXXX" }).mask("selector");

2. remove()

To remove a mask from an input field, use the remove() method:

Inputmask.remove("selector");

3. format()

The format() method allows you to format a given value with a specified mask:

var formattedValue = Inputmask.format( "919867543298",
{ alias:"phonenumber", inputFormat: "(91)-99999-99999"});

4. isComplete()

This method checks if the user has completely filled the input according to the mask:

if (Inputmask.isComplete("input")) {
  console.log("Input is complete");
}

5. isValid()

This method verifies whether the input conforms to the mask:

let verify = Inputmask.isValid( "(91)-98675-43289" ,
{ alias : "phonenumber" ,inputFormat: "+91-99999-99999"});

Example: In this example, we will see a demonstration of the input mask.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <!-- CDN for the Jquery and inputmask plugin -->
    <title>
        JQuery input mask phone 
        number validation
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js">
    </script>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

    <style>
        body,
        html {
            height: 100%;
            background-repeat: no-repeat;
            background-color: #d3d3d3;
            font-family: 'Oxygen', sans-serif;
        }

        .main {
            margin-top: 70px;
        }

        h1.title {
            font-size: 50px;
            font-family: 'Passion One', cursive;
            font-weight: 400;
        }

        hr {
            width: 10%;
            color: #fff;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            margin-bottom: 15px;
        }

        input,
        input::-webkit-input-placeholder {
            font-size: 11px;
            padding-top: 3px;
        }

        .main-login {
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        }

        .main-center {
            margin-top: 30px;
            margin: 0 auto;
            max-width: 330px;
            padding: 40px 40px;
        }

        i {
            margin-right: 5px;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row main">
            <div class="main-login main-center">
                <form class="form-horizontal" 
                    method="post" action="#">

                    <div class="form-group">
                        <label for="name" 
                            class="cols-sm-2 control-label">
                            User Name
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user fa" 
                                        aria-hidden="true"></i>
                                </span>
                                <input type="text" class="form-control" 
                                    name="name" id="name" 
                                    placeholder="User Name" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" 
                            class="cols-sm-2 control-label">
                            Date of Birth
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-birthday-cake fa" 
                                        aria-hidden="true"></i>
                                </span>
                                <input type="text" class="form-control" 
                                    id="dob" placeholder="XX-XX-XXXX" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="cols-sm-2 control-label">
                            Password
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-lock fa-lg" 
                                        aria-hidden="true"></i>
                                </span>
                                <input type="password" class="form-control"
                                     name="password" id="password"
                                    placeholder="********" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {

            /* Mask for Geeks Name */
            Inputmask("aaaaaaaaaaaaaaaa", {

                placeholder: "-",
                greedy: false,
                casing: "upper",
                jitMasking: true
            }).mask('#name');

            /* Mask for Zip code */
            Inputmask("9{2}[-]9{2}[-]9{4}", {
                placeholder: "-",
                greedy: false
            }).mask('#dob');

            /* Mask for Password */
            Inputmask("*{8,16}", {
                placeholder: "-",
                greedy: false,
            }).mask('#password');
        });
    </script>
</body>

</html>

Output:

jQuery :input Selector

satyam00so

Improve

Article Tags :