Finding the right input masking library can be tricky. There are many options, each with its pros and cons. Some are feature-packed but heavy, while others are lightweight but miss critical functionalities like validation or mobile-friendly optimizations.
In today’s world, where performance and user experience are top priorities, selecting the right library is crucial. A solution that minimizes bundle size and enhances mobile usability while providing robust validation can make a huge difference in your project.
Popular Libraries and Their Limitations
If you’ve needed input masking for forms, you’ve likely come across libraries like Inputmask, Cleave.js, and IMask. These libraries are really great, but they come with trade-offs:
Inputmask:
- Powerful and flexible, but significantly increases bundle size (~20 KB gzipped).
- Lacks features like inputmode for better mobile experiences.
Cleave.js:
- Simple and supports dynamic masks.
- However, it lacks built-in validation or automatic configurations like minlength and maxlength.
IMask:
- Offers great features with a moderate size (~5 KB gzipped).
- It’s powerful but can be overkill for simpler use cases.
While these are solid tools, I felt there was room for a solution that’s lighter, flexible, and focused on mobile usability.
Introducing Masky.js
That’s why I built Masky.js: an ultra-lightweight (just 1.3 KB gzipped) alternative that prioritizes performance without sacrificing flexibility or essential features.
Super Lightweight:
- At just 1.3 KB gzipped, it’s one of the smallest solutions on the market.
- Perfect for projects where bundle size is critical.
Mobile-Friendly:
- Automatically sets the inputmode attribute based on the mask, ensuring a better typing experience on mobile devices.
Fully Customizable:
- Supports custom masks with prefixes, suffixes, and even reverse masks.
Built-In Validation:
- Native support for CPF and CNPJ (Brazilian IDs) validation.
Automation:
- Automatically calculates and applies minlength and maxlength based on the mask.
Zero Dependencies:
- 100% Vanilla JS, making it easy to integrate with any environment or framework.
Comparison
| Feature | Masky.js | Inputmask | Cleave.js | IMask |
| Size (Gzipped) | 1.3 KB | 20 KB | 8 KB | 5 KB |
| Dependencies | None | None | None | None |
| Custom Masks | ✅ | ✅ | ✅ | ✅ |
| Prefixes/Suffixes | ✅ | ❌ | ✅ | ✅ |
| Built-in CPF/CNPJ Validation | ✅ | ❌ | ❌ | ❌ |
| inputmode for Mobile | ✅ | ❌ | ❌ | ✅ |
| Automatic Min/Max Length Validation | ✅ | ❌ | ❌ | ❌ |
| Reverse Masks | ✅ | ✅ | ❌ | ✅ |
Usage Example
Simplicity is key. Just add the data-mask attribute, and let Masky.js handle the rest—prefixes, suffixes, validations, and even automatic inputmode and minlength adjustments.
<!-- 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>Check more details of how to use on the documentation.
Try it Out
If you’re looking for a fast, flexible, and performance-focused input masking solution, give Masky.js a shot!
👉 GitHub: https://github.com/eduardovillao/masky-js
👉 npm: https://www.npmjs.com/package/masky-js
I’d love to hear your thoughts or suggestions! 😊
