ODGMask

Vanilla Javascript simple mask plugin,
which supports dynamically created elements ...

;
Get Started Veja no GitHub

Get Started

Installation

Package is installable via npm

npm install @odg/odg-mask --save


Example

CPF: 000.000.000-00 

<input type="text" placeholder="000.000.000-00" odg-mask="000.000.000-00" />
Teste:

CNPJ: 00.000.000/0000-00 

<input type="text" placeholder="00.000.000/0000-00" odg-mask="00.000.000/0000-00" />
Teste:

Phone area Code: (00) 0000-0000 

<input type="text" placeholder="(00) 0000-0000" odg-mask="(00) 0000-0000" />
Teste:

Phone: 0000-0000 

<input type="text" placeholder="0000-0000" odg-mask="0000-0000" />
Teste:

Hour: 00:00 

<input type="text" placeholder="00:00" odg-mask="00:00" />
Teste:

Date: 00/00/0000 

<input type="text" placeholder="00/00/0000" odg-mask="00/00/0000" />
Teste:

CEP (Brasil): 00.000-000 

<input type="text" placeholder="00.000-000" odg-mask="00.000-000" />
Teste:

Car License place (Brasil): AAA-0000 

<input type="text" placeholder="AAA-0000" odg-mask="AAA-0000" />
Teste:

IP Address: 099.099.099.099 

<input type="text" placeholder="099.099.099.099" odg-mask="099.099.099.099" />
Teste:

No Token Next Char: !AAA 

<input type="text" placeholder="!AAA" odg-mask="!AAA" />
Teste:

Use Function:

JS

The ODGMask function can be used globally in the project using 

import ODGMask from 'odgmask'

or 

window.ODGMask

/*
 * Value - value to receive masks
 * Mask - mask to apply and tokens
 *
 * ODGMask(value, mask)
 */
let div = document.querySelector('#client_cpf');
let mask = ODGMask(div.innerText, '000.000.000-00');
div.innerText = mask.value;
// div.innerText = mask.unmasked; // value without the mask

00000000000

   

Mask Tokens:

Create custom tokens

You can change the tokens used by default or create one for just one or more specific uses 

import ODGMask from '@odg/odg-mask'
ODGMask.defaultTokens = {
    ...ODGMask.defaultTokens,
    // NEW tokens
};
// or
ODGMask(value, mask, {
    tokens: {
        ...ODGMask.defaultTokens,
        "G": {
            pattern: /[a-zA-Z0-9]/u,
            transform: (el) => String(el).toLocaleLowerCase(), // transforms the letter before inserting
            optional: true, // is optional?
            nextElement: true, // should the action be performed on the next element?
            noMask: true // this element should not be treated as a token

        }
    }
})

INFO:

//! if you use the 'nextElement' option, all actions will override the actions of the next mask item. // and the item with the 'nextElement' will be skipped

Example: ! indicates that the next element should not be used as a mask 

window.ODGMask

Defaults Tokens:

Available tokens

Code Info
S Letter a-zA-Z
A a-zA-Z and acentuatioconvert to UPPERCASE
a a-zA-Z convert to LOWERCASE
Y a-zA-Z convert to UPPERCASE and accepts accentuation
y a-zA-Z convert to LOWERCASE and accepts accentuation
X alpha numerics a-zA-Z0-9 Letter and numbers
# alpha numerics a-zA-Z0-9 Letter and numbers and accepts accentuation
0 Number
9 Number optional
? : t element is optional
! : next element should not be treated as a token / mask

Token Code:

/* eslint-disable sort-keys */
export default {
  "S": { pattern: /[a-zA-Z]/u },
  "A": {
    pattern: /[a-zA-Z]/u,
    transform: (el) => String(el).toLocaleUpperCase()
  },
  "a": {
    pattern: /[a-zA-Z]/u,
    transform: (el) => String(el).toLocaleLowerCase()
  },
  "Y": {
    pattern: /[a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]/u,
    transform: (el) => String(el).toLocaleUpperCase()
  },
  "y": {
    pattern: /[a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]/u,
    transform: (el) => String(el).toLocaleLowerCase()
  },
  "X": { pattern: /[a-zA-Z0-9]/u },
  "#": { pattern: /[a-zA-Z0-9\u00C0-\u024F\u1E00-\u1EFF]/u },
  "0": { pattern: /\d/u },
  "9": {
    pattern: /\d/u,
    optional: true
  },
  "?": {
    nextElement: true,
    optional: true
  },
  "!": {
    nextElement: true,
    noMask: true
  }
};