Javascript Input Mask

Features

get and set value and unmasked value easily
no external dependencies
supports overwrite mode
supports all major browsers
supports web components
supports contenteditable
RegExp mask
Function mask
Number mask (integer and decimal support)
Date mask (with various format support and autofix mode)
Dynamic/on-the-fly mask
Pattern mask

show placeholder always or when needed
unmasked value can contain fixed parts
optional input parts
custom definitions
reusable blocks
secure text entry
Enum and Range masks
Repeating blocks

convert and format values with pipe

Plugins

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

source

IMask(
  document.getElementById('regexp-mask'),
  {
    mask: /^[1-6]\d{0,5}$/
  }
)

learn more

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

unmasked:

source

IMask(
  document.getElementById('phone-mask'),
  {
    mask: '+{7}(000)000-00-00'
  }
)

learn more

Pattern (Secure) XXX-XX-0000

value:

source

IMask(
  document.getElementById('ssn-mask'),
  {
    mask: 'XXX-XX-0000',
    definitions: {
      X: {
        mask: '0',
        displayChar: 'X',
        placeholderChar: '#',
      },
    },
    lazy: false,
    overwrite: 'shift',
  }
)

learn more

Number in range [-10000, 10000]

number:

source

IMask(
  document.getElementById('number-mask'),
  {
    mask: Number,
    min: -10000,
    max: 10000,
    thousandsSeparator: ' '
  }
)

learn more

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

date:

source

IMask(
  document.getElementById('date-mask'),
  {
    mask: Date,
    min: new Date(1990, 0, 1),
    max: new Date(2020, 0, 1),
    lazy: false
  }
)

learn more

On-the-fly select phone or email

unmasked:

source

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

learn more

Mask in mask currency input

unmasked:

source

IMask(
  document.getElementById('currency-mask'),
  {
    mask: '$num',
    blocks: {
      num: {
        // nested masks are available!
        mask: Number,
        thousandsSeparator: ' '
      }
    }
  }
)

learn more

Pipe unmasked → masked

masked:

source

IMask.createPipe(
  phoneMask.masked,
  IMask.PIPE_TYPE.UNMASKED,
  IMask.PIPE_TYPE.MASKED
)

learn more