Imask

vanilla javascript input mask

Requires CSS and JS. (Note: if you are using our dist folder then will get libs folder in it.)

assets/libs/imask/dist/imask.min.js
assets/js/vendors/inputmask.js

Note that this component requires the use of the third-party Imask plugin.

Basic examples

Preview
Code

RegExp (Russian postal code) /^[1-6]\d{0,5}$/

Pattern (Phone) +{7}(000)000-00-00

unmasked:

Pattern (Secure) XXX-XX-0000

value:

Number in range [-10000, 10000]

number:

Date 'dd.mm.yyyy' in range [01.01.1990, 01.01.2020]

date:

On-the-fly select phone or email

unmasked:

Mask in mask currency input

unmasked:

Pipe unmasked → masked

masked:

Card Number

CVV Code

 <form class="form">
                                                <div class="mb-3">
                                                <label class="form-label">RegExp (Russian
                                                postal code) <span class="desc">/^[1-6]\d{0,5}$/</span></label>
                                                <input class="form-control" id="regexp-mask" type="text" value="">
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Pattern (Phone)
                                                <span class="desc">+{7}(000)000-00-00</span></label>
                                                <input class="form-control" id="phone-mask" type="text" value="">
                                                <div class="unmasked-value desc">unmasked: <span id="phone-unmasked"></span><span id="phone-complete" class="example__complete"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Pattern (Secure)
                                                <span class="desc">XXX-XX-0000</span></label>
                                                <input class="form-control" id="ssn-mask" type="text" value="">
                                                <div class="unmasked-value desc">value: <span id="ssn-value"></span><span id="ssn-complete" class="example__complete"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Number <span class="desc">in range [-10000,
                                                10000]</span></label>
                                                <input class="form-control" id="number-mask" type="text" value="">
                                                <div class="unmasked-value desc">number: <span id="number-value"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Date <span class="desc">'dd.mm.yyyy' in
                                                range [01.01.1990, 01.01.2020]</span></label>
                                                <input class="form-control" id="date-mask" type="text" value="">
                                                <div class="unmasked-value desc">date: <span id="date-value"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">On-the-fly select
                                                <span class="desc">phone or email</span></label>
                                                <input class="form-control" id="dynamic-mask" type="text">
                                                <div class="unmasked-value desc">unmasked: <span id="dynamic-value"></span><span id="dynamic-complete" class="example__complete"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Mask in mask <span class="desc">currency input</span></label>
                                                <input class="form-control" id="currency-mask" type="text">
                                                <div class="unmasked-value desc">unmasked: <span id="currency-value"></span><span id="currency-complete" class="example__complete"></span></div>
                                                </div>
                                                <div class="mb-3">
                                                <label class="form-label">Pipe <span class="desc">unmasked →
                                                masked</span></label>
                                                <input class="form-control" id="pipe-mask" type="text">
                                                <div class="unmasked-value desc">masked: <span id="pipe-value"></span><span id="pipe-complete" class="example__complete"></span></div>
                                                </div>
                                                </form>