Input Mask in Jquery

Jquery Input mask

So, jquery input mask is third party library that we can use for masking purposes. It is easier to implement and for that we will need to first add jquery inputmask cdn. You can get that from jquery.inputmask cdn . You can copy the cdn and place it on your page after jquery file.

Now, after adding the cdn we will add three input fileds to see different types of masking 

<input type="text" id="phone" class="form-control" style="margin-top:10px" />

<input type="text" id="Email" class="form-control" style="margin-top:10px" />

<input type="text" id="card" class="form-control" style="margin-top:10px" />

After this we will add inputmask methods on document ready to apply masking. You can copy the methods from below

  $(document).ready(function () {
            $("#phone").inputmask("(999) 999-9999");
            $("#Email").inputmask("email");
            $("#card").inputmask("9999 9999 9999 9999");
        })

So , now you can run the application and try entering the data. You will as you type , text is getting formatted automatically like the specified format. So this how you can apply input mask in jquery.

check the results below