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
  • Functional 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)
Further plans
  • Angular/React/Vue plugins
  • more unit tests
var regExpMask = new IMask(
  document.getElementById('regexp-mask'),
  {
    mask: /^[1-6]\d{0,5}$/
  });
learn more
unmasked:
var phoneMask = new IMask(
  document.getElementById('phone-mask'), {
  mask: '+{7}(000)000-00-00'
});
learn more
number:
var numberMask = new IMask(
  document.getElementById('number-mask'),
  {
    mask: Number,
    min: -10000,
    max: 10000,
    thousandsSeparator: ' '
  });
learn more
date:
var dateMask = new IMask(
  document.getElementById('date-mask'),
  {
    mask: Date,
    min: new Date(2000, 0, 1),
    max: new Date(2020, 0, 1),
    placeholder: {lazy: false}
  });
learn more
unmasked:
var dynamicMask = new IMask(
  document.getElementById('dynamic-mask'),
  {
    mask: [
      {
        mask: '+{7}(000)000-00-00'
      },
      {
        mask: /^\S*@?\S*$/
      }
    ]
  });
learn more