Masky.js

📦 Masky.js – A compact and high-performance JavaScript library for input masking. Weighing only 1.3 KB (gzip), it’s optimized for fast loading and ideal for any project requiring lightweight, flexible, and customizable input masks.

Features

• Super Lightweight: Only 1.3 KB gzipped, minimizing your app’s bundle size.
• Automatic Enhancements:
  • inputmode support: Dynamically adjusts for better mobile user experience.
  • minlength and maxlength: Automatically calculated based on the mask.
• Built-in Validations: Native support for CPF and CNPJ validation.
• Flexible Masks: Add custom masks with prefixes, suffixes, and dynamic formatting.
• Ease of Use: Just add data-mask and optional attributes—Masky.js does the rest.
• Vanilla JS: Works without any dependencies, making it adaptable to any environment.

Usage

Basic Example

Add data-mask to your input fields, and the library will handle the rest:

<input type="text" data-mask="(00) 00000-0000" />
<script src="dist/masky.min.js"></script>

Adding Prefixes and Suffixes

Add data-mask-prefix or data-mask-suffix to include additional characters:

<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />

Validating CPF and CNPJ

Use data-mask-validation for built-in validation of CPF and CNPJ:

<input type="text" data-mask="000.000.000-00" data-mask-validation="cpf" />
<input type="text" data-mask="00.000.000/0000-00" data-mask-validation="cnpj" />

Available Tokens

Masky.js provides the following tokens for creating masks:

| Token | Description | Example Input | Example Mask | | |-------|-----------------------|---------------|--------------|---| | 0 | Numeric digits only | 123 | 000 → 123 | | | A | Alphanumeric | 1aB | AAA → 1AB | | | S | Alphabetic characters | abc | SSS → abc | |

Why Masky.js?

• Automatic Enhancements: Input mode (inputmode) and field limits (minlength and maxlength) are calculated and applied automatically based on the mask.
• Built for Performance: With only 1.3 KB gzipped, it’s one of the most efficient libraries available.
• Flexibility: Perfect for any environment—websites, frameworks, or CMS integrations.
• Ease of Integration: Add data-mask to your inputs, and Masky.js takes care of formatting, validation, and user experience.

Example

<input type="text" data-mask="(00) 00000-0000" />
<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />
<input type="text" data-mask="AAA-SSS-000" />
<script src="dist/masky.min.js"></script>

• No need to manually define inputmode or limits-—Masky.js handles them automatically.
• Add as much customization as needed with data-mask-prefix and data-mask-suffix.

Installation

🌐 Via CDN

Use Masky.js directly from a reliable CDN:

jsDelivr

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

UNPKG

<script src="https://unpkg.com/masky-js/dist/masky.min.js"></script>

📦 Via npm

Masky.js is available on npm. Install it using the following command:

npm install masky-js

After installation, include the file in your project:

import 'masky-js/dist/masky.min.js';

📂 Copy the File

For now, download or copy the file directly from the /dist directory of the repository:

1. Go to the /dist folder in this repository.
2. Download or copy the masky.min.js file.
3. Include it in your project:

<script src="path/to/masky.min.js"></script>

Contributing

We welcome contributions! Fork the repository, create a branch, and open a pull request.

License

This project is licensed under the MIT License.