vanilla-mask

Vanilla Mask is a pure javascript mask for text

Usage no npm install needed!

<script type="module">
  import vanillaMask from 'https://cdn.skypack.dev/vanilla-mask';
</script>

README

Vanilla mask 1.0.0

It's a pure JavaScript mask input. Now you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery.

Usage

Using npm run:

npm install vanilla-mask --save

To use with ES6:

import Mask from 'vanilla-mask'

var mask = new Mask();
mask.build('text','format');

Examples:

mask.build('1234567890','(##) ####-####'); // Formatted (12) 3456-7890
mask.build('12345678901','###.###.###-##'); // Formatted 123.456.789-01

// Formatted with placeholder
mask.build('12345','(##) ####-####', '_'); // Formatted (12) 345_-____
mask.build('123456','###.###.###-##', ' '); // Formatted 123.456.   -  

Working with regexp

For better performance, it is recommended to use regexp, which will give you more freedom and more speed in the construction of the mask.

const config = {
    cpf: [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/],
     cnpj: [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/],
     date: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
     datetime: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/, ':', /\d/, /\d/],
    phone: ['(', /\d/, /\d/, ')', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    time: [/\d/, /\d/, ':', /\d/, /\d/, ':', /\d/, /\d/],
    zipcode: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
};

var mask = new Mask(config);

mask.exec('1234567890','phone'); // Formatted (12) 3456-7890
mask.exec('12345678901','cpf'); // Formatted 123.456.789-01