imaskjs - vanilla javascript input mask

Features

get and set value and unmasked value easily
no external dependencies
Supports all major browsers and IE11+ *need older?
RegExp mask
Function mask
Number mask (integer and decimal support)
Date mask (with various format support)
Dynamic/on-the-fly mask
Pattern mask

show placeholder always or when needed
unmasked value can contain fixed parts
optional input parts (greedy)

React plugin

Further plans

Angular/Vue plugins
more unit tests

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

source

var regExpMask = new IMask(
  document.getElementById('regexp-mask'),
  {
    mask: /^[1-6]\d{0,5}$/
  });
learn more

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

unmasked:

source

var phoneMask = new IMask(
  document.getElementById('phone-mask'), {
  mask: '+{7}(000)000-00-00'
});
learn more

Number in range [-10000, 10000]

number:

source

var numberMask = new IMask(
  document.getElementById('number-mask'),
  {
    mask: Number,
    min: -10000,
    max: 10000,
    thousandsSeparator: ' '
  });
learn more

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

date:

source

var dateMask = new IMask(
  document.getElementById('date-mask'),
  {
    mask: Date,
    min: new Date(2000, 0, 1),
    max: new Date(2020, 0, 1),
    placeholderLazy: false
  });
learn more

On-the-fly select phone or email

unmasked:

source

var dynamicMask = new IMask(
  document.getElementById('dynamic-mask'),
  {
    mask: [
      {
        mask: '+{7}(000)000-00-00'
      },
      {
        mask: /^\S*@?\S*$/
      }
    ]
  });
learn more