Usage
CSS
Copy-paste the stylesheet
<link>
into your
<head>
to load the CSS.
<link rel="stylesheet" href="../assets/css/theme.min.css">
Js
Copy-paste the following
<script>
and
Function
near the end of your pages.
<script src="../node_modules/imask/dist/imask.min.js"></script>
<script src="../assets/js/vendors/inputmask.js"></script>
Basic examples
<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>