{"id":318,"date":"2025-01-20T17:03:14","date_gmt":"2025-01-20T20:03:14","guid":{"rendered":"https:\/\/eduardovillao.me\/pt-br\/?p=318"},"modified":"2025-01-20T17:04:20","modified_gmt":"2025-01-20T20:04:20","slug":"masky-js-uma-alternativa-leve-ao-inputmask-cleave-js-e-imask","status":"publish","type":"post","link":"https:\/\/eduardovillao.me\/pt-br\/masky-js-uma-alternativa-leve-ao-inputmask-cleave-js-e-imask\/","title":{"rendered":"Masky.js: Uma Alternativa Leve ao Inputmask, Cleave.js e IMask"},"content":{"rendered":"\n
Encontrar a biblioteca certa para mascarar inputs pode ser um desafio. Existem muitas op\u00e7\u00f5es dispon\u00edveis, cada uma com seus pr\u00f3s e contras. Algumas s\u00e3o repletas de recursos, mas pesadas; outras s\u00e3o leves, mas carecem de funcionalidades importantes, como valida\u00e7\u00e3o ou otimiza\u00e7\u00f5es para dispositivos m\u00f3veis.<\/p>\n\n\n\n
No mundo atual, onde performance<\/strong> e experi\u00eancia do usu\u00e1rio<\/strong> s\u00e3o prioridades, escolher a biblioteca certa \u00e9 fundamental. Uma solu\u00e7\u00e3o que minimize o tamanho do bundle e melhore a usabilidade em dispositivos m\u00f3veis, enquanto oferece valida\u00e7\u00f5es robustas, pode fazer uma enorme diferen\u00e7a no seu projeto.<\/p>\n\n\n\n Se voc\u00ea j\u00e1 precisou de m\u00e1scaras para formul\u00e1rios, provavelmente encontrou bibliotecas como Inputmask<\/strong>, Cleave.js<\/strong> e IMask<\/strong>.<\/p>\n\n\n\n Embora essas bibliotecas sejam excelentes, elas v\u00eam com algumas desvantagens:<\/p>\n\n\n\n Inputmask<\/strong><\/p>\n\n\n\n Cleave.js<\/strong><\/p>\n\n\n\n IMask<\/strong><\/p>\n\n\n\n Embora essas ferramentas sejam s\u00f3lidas, senti que havia espa\u00e7o para uma solu\u00e7\u00e3o mais leve<\/strong>, flex\u00edvel<\/strong> e focada na usabilidade em dispositivos m\u00f3veis<\/strong>.<\/p>\n\n\n\n Foi por isso que criei o Masky.js<\/strong>: uma alternativa ultra-leve (apenas 1.3 KB gzipado<\/strong>) que prioriza a performance sem abrir m\u00e3o da flexibilidade e dos recursos essenciais.<\/p>\n\n\n\n Super Leve<\/strong>:<\/p>\n\n\n\n Amig\u00e1vel para Mobile<\/strong>:<\/p>\n\n\n\n Totalmente Personaliz\u00e1vel<\/strong>:<\/p>\n\n\n\n Valida\u00e7\u00e3o Embutida<\/strong>:<\/p>\n\n\n\n Automa\u00e7\u00e3o<\/strong>:<\/p>\n\n\n\n Sem Depend\u00eancias<\/strong>:<\/p>\n\n\n\n A simplicidade \u00e9 fundamental. Basta adicionar o atributo data-mask, e o Masky.js cuida do resto \u2014 prefixos, sufixos, valida\u00e7\u00f5es e at\u00e9 ajustes autom\u00e1ticos de inputmode e minlength.<\/p>\n\n\n\n Confira mais detalhes de uso na documenta\u00e7\u00e3o<\/a>.<\/p>\n\n\n\n Se voc\u00ea est\u00e1 procurando uma solu\u00e7\u00e3o de m\u00e1scaras r\u00e1pida, flex\u00edvel e focada na performance, experimente o Masky.js<\/strong>!<\/p>\n\n\n\n \ud83d\udc49 GitHub<\/strong>: Masky.js<\/a><\/p>\n\n\n\nBibliotecas Populares e Suas Limita\u00e7\u00f5es<\/strong><\/h2>\n\n\n\n
\n
\n
\n
Apresentando Masky.js<\/strong><\/h2>\n\n\n\n
\n
\n
\n
\n
\n
\n
Compara\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n
Recurso<\/strong><\/td> Masky.js<\/strong><\/td> Inputmask<\/strong><\/td> Cleave.js<\/strong><\/td> IMask<\/strong><\/td><\/tr> Tamanho (Gzipado)<\/strong><\/td> 1.3 KB<\/td> 20 KB<\/td> 8 KB<\/td> 5 KB<\/td><\/tr> Depend\u00eancias<\/strong><\/td> Nenhuma<\/td> Nenhuma<\/td> Nenhuma<\/td> Nenhuma<\/td><\/tr> M\u00e1scaras Personaliz\u00e1veis<\/strong><\/td> \u2705<\/td> \u2705<\/td> \u2705<\/td> \u2705<\/td><\/tr> Prefixos\/Sufixos<\/strong><\/td> \u2705<\/td> \u274c<\/td> \u2705<\/td> \u2705<\/td><\/tr> Valida\u00e7\u00e3o de CPF\/CNPJ<\/strong><\/td> \u2705<\/td> \u274c<\/td> \u274c<\/td> \u274c<\/td><\/tr> inputmode para Mobile<\/strong><\/td> \u2705<\/td> \u274c<\/td> \u274c<\/td> \u2705<\/td><\/tr> Valida\u00e7\u00e3o de Min\/Max<\/strong><\/td> \u2705<\/td> \u274c<\/td> \u274c<\/td> \u274c<\/td><\/tr> M\u00e1scaras Reversas<\/strong><\/td> \u2705<\/td> \u2705<\/td> \u274c<\/td> \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Como Usar o Masky.js?<\/strong><\/h2>\n\n\n\n
<!-- Simple Phone Mask -->\n<input type=\"text\" data-mask=\"(00) 00000-0000\" \/>\n\n<!-- Add Prefix and Suffix -->\n<input type=\"text\" data-mask=\"000-000\" data-mask-prefix=\"+55 \" data-mask-suffix=\" ext\" \/>\n\n<!-- Built-in CPF Validation -->\n<input type=\"text\" data-mask=\"000.000.000-00\" data-mask-validation=\"cpf\" \/>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/masky-js\/dist\/masky.min.js\"><\/script><\/code><\/pre>\n\n\n\n
Experimente o Masky.js<\/strong><\/h2>\n\n\n\n