Maskjs

Mask.js is a simple functionality that you can use to force user met a pattern into inputs

View the Project on GitHub bguzmanrio/maskjs

What is Mask.js about?

Mask.js is a simple functionality that you can use to force user met a pattern into inputs.

Dependencies

Mask.js works on most jQuery versions.

Main Features

How can I use Mask.js?

There are just a few steps:

  1. You have to import mark.js into your project
  2. Once imported, just get the input you want to be masked using jQuery, passing the input as first argument:
    Mask.newMask(options);
    Where options is a JS object containing the following attributes:
    {
        $el: jQuery input,
        mask: pattern to apply(described in the next section),
        errorFunction: callback function triggered on every error,
        defaultValue: defaultValue to be shown on initialization(applies on date format),
        hidePlaceholder: boolean for not showing the pattern placeholder,
        isUtc: if the pattern is a date format, utc will be considered
    }
                
  3. Pattern is the mask you want to apply over the input. It can be one of the following:
    • Any combination of YYYY-MM-DD HH:mm, where:
      • Y means year
      • M means month
      • D means day
      • H means hour
      • m means minutes
    • n for typing only numbers
    • az for typing only characters
    • az/n for typing both characters and numbers
  4. Additionaly you can add a number after n or az to limit the maximun characters users can write

Try it out

YYYY-DD/MM HH:mm
HH:mm DD+MM+YYYY
HH:mm
Maximum 8 numbers
Only a-z characters
Only a-z characters and numbers, maximum 5 characters