Imask

vanilla javascript input mask

Imask documentation

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

unmasked:
value:
number:
date:
unmasked:
unmasked:
masked: 
 <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>
Contents