Input mask

Inputmask is a JavaScript library which creates an input mask allowing you to add certain formats and input restrictions.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="/assets/libs/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

Initialization

Add the .input-mask class on the input you want to apply a mask. After that use the data-mask="00/00/0000", in which you can use 0s, separators or space to create format your mask.

Examples

<form>
    <div class="form-group">
        <label class="form-control-label">Date</label>
        <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="MM/DD/YYY">
    </div>
    <div class="form-group">
        <label class="form-control-label">Time</label>
        <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="hh:mm:ss">
    </div>
    <div class="form-group">
        <label class="form-control-label">Datetime</label>
        <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="MM/DD/YYY hh:mm:ss">
    </div>
    <div class="form-group">
        <label class="form-control-label">Phone number</label>
        <input type="text" class="form-control input-mask" data-mask="0000 000 000" placeholder="0720 444 555">
    </div>
    <div class="form-group">
        <label class="form-control-label">Phone number with prefix</label>
        <input type="text" class="form-control input-mask" data-mask="(00) 0000 0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label class="form-control-label">US phone number</label>
        <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label class="form-control-label">Card number</label>
        <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="1234 5678 9012 3456">
    </div>
    <div class="form-group">
        <label class="form-control-label">IP address</label>
        <input type="text" class="form-control input-mask" data-mask="000.000.000.0000" placeholder="192.168.567.890">
    </div>
</form>