Open In App

jQuery Inputmask

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Inputmask is a JavaScript library that creates masks for input data. Inputmask is used to ensure the predefined format of the input field. This plugin is useful for taking date, numeric, phone numbers, etc. This plugin has many functionalities which makes it more useful than the other masking plugin. We can use this plugin for creating masks for date, time, numeric, css unit, url, IP, email, etc. 

For example, the developer wants to take input in the format of  “{A-za-z0-9}@gmail.com”. They can specify this format using jQuery inputmask and the input box field will take the email, in the defined format. The developer has to select the desired input field and specify the desired format using the inputmask() plugin.

The mask plugin is used for the same purpose. But here Inputmask plugin provides some extra features and methods which makes it more use full.

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:

Using data-inputmask: We can define the inputmask attribute of the input tag of HTML. Option can also be passed by data attributes.

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

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

Using plugin on the target element: All option can be passed to inputmask in key value format.

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

Using Inputmask Class: We can define the mask for input using Inputmask class.

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

Types of Inputmasking :

Static Masking: This is a masking type where we can only define the mask one time and not change during input.

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

Jit Masking: We can define this type of masking using the jitMasking option. Jit Masking is the masking only for the user input value.

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

Alternator Masking: This mask is used when we have multiple choices to define the mask. This is like “or” masking.

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

Optional Masking: In this type of masking, we can define some part of mask as optional. We can use [ ] brackets to define optional parts.

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

Preprocessing Masking: In this type of masking, we can preprocess our result mask.

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

Dynamic Masking: In this type of masking, we can change the length of masking using lower and upper limit of length. We can do this by using { } this brackets. The length of the mask can be from 1 to 5

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

Some methods of the Inputmask plugin are as follows.

mask(): This method is used to create the mask for input value.

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

remove(): This method is used to remove the input mask of value.

  •  
Inputmask.remove("selector");

format( ): We can define mask for given value using this method.

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

isComplete(): This method is used to verify whether the value is complete of not.

isValid(): This method is used to verify the value against 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=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href=
 
    <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  Inputmask

jQuery Inputmask



Last Updated : 11 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads