Form InputMasks

An input mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers...

We use Jasny Bootstrap plugin to add input masks.

Jasny Bootstrap Documentation.

How to use?

Simply add data-mask attribute to your input.This way, you can define if you want text or number, how many you want and if there are separators.

For example, if you want a zip code with 5 numbers, your mask will be: data-mask="99999".

Here is a more complete list of example that you can use:

<!-- Phone Number -->
<input type="text"  data-mask="(999) 999-9999 x9999" class="form-control">

<!-- Credit Card -->
<input type="text" data-mask="9999-9999-9999-9999" class="form-control">

<!-- Zip Code -->
<input type="text" data-mask="99999" class="form-control">

<!-- HEX Color Values (A-F &amp; 0-9) -->
<input type="text" data-mask="#wwwwww" class="form-control">

<!-- Serial Number -->
<input type="text" data-mask="wwww-wwww-wwww-wwww" class="form-control">

<!-- Date -->
<input type="text"  data-mask="99/99/9999" class="form-control">

<!-- Date different format -->
<input type="text" data-mask="99-99-9999" class="form-control">

<!-- Time -->
<input type="text" data-mask="99:99:99" class="form-control" placeholder="00:00:00">

<!-- Date &amp; Time -->
<input type="text" data-mask="99/99/9999 99:99:99" class="form-control">

<!-- Tax ID -->
<input type="text" data-mask="99-9999999" class="form-control">