--- layout: default title: Javascript Input Mask --- {% include default_header.html %}

#### 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
- Enum and Range masks

- convert and format values with pipe

#### Plugins

- Vue plugin
- Angular plugin
- React plugin
- React native plugin
- Svelte plugin

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

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

Pattern (Phone) +{7}(000)000-00-00
unmasked:
source

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

Number in range [-10000, 10000]
number:
source

    var numberMask = 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

    var dateMask = 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

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

Mask in mask currency input
unmasked:
source

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

Pipe unmasked → masked
masked:
source

    var phonePipe = IMask.createPipe(
      phoneMask.masked,
      IMask.PIPE_TYPE.UNMASKED,
      IMask.PIPE_TYPE.MASKED
    );
    learn more