Encontrar a biblioteca certa para mascarar inputs pode ser um desafio. Existem muitas opções disponíveis, cada uma com seus prós e contras. Algumas são repletas de recursos, mas pesadas; outras são leves, mas carecem de funcionalidades importantes, como validação ou otimizações para dispositivos móveis.

No mundo atual, onde performance e experiência do usuário são prioridades, escolher a biblioteca certa é fundamental. Uma solução que minimize o tamanho do bundle e melhore a usabilidade em dispositivos móveis, enquanto oferece validações robustas, pode fazer uma enorme diferença no seu projeto.

Bibliotecas Populares e Suas Limitações

Se você já precisou de máscaras para formulários, provavelmente encontrou bibliotecas como Inputmask, Cleave.js e IMask.

Embora essas bibliotecas sejam excelentes, elas vêm com algumas desvantagens:

Inputmask

• Poderosa e flexível, mas aumenta significativamente o tamanho do bundle (~20 KB gzipado).
• Não possui recursos como o atributo inputmode para uma melhor experiência em dispositivos móveis.

Cleave.js

• Simples e com suporte a máscaras dinâmicas.
• No entanto, carece de validação embutida ou configurações automáticas como minlength e maxlength.

IMask

• Oferece ótimos recursos com um tamanho moderado (~5 KB gzipado).
• É poderosa, mas pode ser excessiva para casos de uso mais simples.

Embora essas ferramentas sejam sólidas, senti que havia espaço para uma solução mais leve, flexível e focada na usabilidade em dispositivos móveis.

Apresentando Masky.js

Foi por isso que criei o Masky.js: uma alternativa ultra-leve (apenas 1.3 KB gzipado) que prioriza a performance sem abrir mão da flexibilidade e dos recursos essenciais.

Super Leve:

• Com apenas 1.3 KB gzipado, é uma das soluções mais compactas do mercado.
• Ideal para projetos onde o tamanho do bundle é crítico.

Amigável para Mobile:

• Define automaticamente o atributo inputmode com base na máscara, garantindo uma melhor experiência de digitação em dispositivos móveis.

Totalmente Personalizável:

• Suporte a máscaras personalizadas com prefixos, sufixos e até máscaras reversas.

Validação Embutida:

• Suporte nativo para validação de CPF e CNPJ (documentos brasileiros).

Automação:

• Calcula e aplica automaticamente os atributos minlength e maxlength com base na máscara.

Sem Dependências:

• 100% Vanilla JS, fácil de integrar com qualquer ambiente ou framework.

Comparação

Recurso	Masky.js	Inputmask	Cleave.js	IMask
Tamanho (Gzipado)	1.3 KB	20 KB	8 KB	5 KB
Dependências	Nenhuma	Nenhuma	Nenhuma	Nenhuma
Máscaras Personalizáveis	✅	✅	✅	✅
Prefixos/Sufixos	✅	❌	✅	✅
Validação de CPF/CNPJ	✅	❌	❌	❌
inputmode para Mobile	✅	❌	❌	✅
Validação de Min/Max	✅	❌	❌	❌
Máscaras Reversas	✅	✅	❌	✅

Como Usar o Masky.js?

A simplicidade é fundamental. Basta adicionar o atributo data-mask, e o Masky.js cuida do resto — prefixos, sufixos, validações e até ajustes automáticos de inputmode e minlength.

<!-- Simple Phone Mask -->
<input type="text" data-mask="(00) 00000-0000" />

<!-- Add Prefix and Suffix -->
<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />

<!-- Built-in CPF Validation -->
<input type="text" data-mask="000.000.000-00" data-mask-validation="cpf" />

<script src="https://cdn.jsdelivr.net/npm/masky-js/dist/masky.min.js"></script>

Confira mais detalhes de uso na documentação.

Experimente o Masky.js

Se você está procurando uma solução de máscaras rápida, flexível e focada na performance, experimente o Masky.js!

👉 GitHub: Masky.js

👉 npm: Masky.js

Adoraria ouvir seus comentários ou sugestões! 😊