Escrito por 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