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>