imagem-biblioteca

Como utilizar a biblioteca Smart Mask

Escrito por

Posted on Deixe um comentário

TL;DR; Esta é uma postagem sobre uma biblioteca de máscaras de dados usando JavaScript no client-side.

Smart Mask (https://github.com/pkunzel/smart_mask) é uma biblioteca de máscara de dados bem simples com o intuito de fornecer múltiplas máscaras que são usadas com frequência em um sistema ou app. O Projeto é constituído por duas classes: uma que aplica as máscaras, e outra que monitora elementos HTML para manter a máscara aplicada. 

Como funcionam as classes? 

ApplyMask 

A Classe apply mask possui apenas métodos estáticos que estão prontos para serem chamados mediante passagem de parâmetros conforme exemplo abaixo 

ApplyMask.toCPF('88888888888') 
// output '888.888.888-88' 
ApplyMask.toPhone('51999999998') 
// output '(51) 999999998'
ApplyMask.charactersOnly('qwerty12345') 
// output 'qwerty'

CustomMask

Gera eventos para os elementos com o atributos data-custom-mask=”mascara”, onde máscara é o nome do tipo de máscara a ser implementada. As opções são: 

  • cpf: um CPF 
  • cnpj: um CNPJ 
  • phone: um telefone com DDD incluso 
  • cep: um CEP 
  • numbers: extrai apenas os valores numéricos 
  • characters: extrai apenas os caracteres 
  • non-special-characters: Extrai apenas os caracteres não especiais 

Exemplo 

HTML

<input type="text" data-custom-mask="cpf" value="11122233344" />

JS

// Ao iniciar a página 
window.addEventListener('load', (e) => new CustomMask()); 
// Obs.: Pode ser feito inicializado em qualquer outro momento.

Importante: Qualquer valor que seja maior que o tamanho da máscara terá os últimos caracteres removidos. ou seja, um CPF que venha com 15 caracteres, devido a algum erro, terá os últimos 4 caracteres removidos.

Onde usar no Oracle APEX?

Para usar no APEX, se o elemento não for HTML puro como mencionado no exemplo acima, você pode adicionar o ‘data-custom-mask’ no custom attrbiutes

Simples assim!

Para ver o artigo original, acesse a postagem Smart Mask – Máscara de Dados

Deixe uma resposta