What is imask?
The 'imask' npm package is a versatile input masking library that allows developers to create input masks for various types of data, such as dates, numbers, and custom patterns. It is highly customizable and supports dynamic masks, pattern masks, and more.
What are imask's main functionalities?
Date Mask
This feature allows you to create a date input mask. The code sample demonstrates how to apply a date mask to an input element with the pattern 'YYYY-MM-DD'.
const element = document.getElementById('date-input');
const maskOptions = { mask: Date, pattern: 'Y-`m-`d' };
const mask = IMask(element, maskOptions);
Number Mask
This feature allows you to create a number input mask. The code sample shows how to apply a number mask to an input element with a range from 0 to 10,000 and a thousands separator.
const element = document.getElementById('number-input');
const maskOptions = { mask: Number, min: 0, max: 10000, thousandsSeparator: ',' };
const mask = IMask(element, maskOptions);
Pattern Mask
This feature allows you to create a custom pattern mask. The code sample demonstrates how to apply a pattern mask to an input element for a credit card number format.
const element = document.getElementById('pattern-input');
const maskOptions = { mask: '0000-0000-0000-0000' };
const mask = IMask(element, maskOptions);
Dynamic Mask
This feature allows you to create dynamic masks that can switch between different patterns based on the input. The code sample shows how to apply a dynamic mask that switches between a phone number and a short code format.
const element = document.getElementById('dynamic-input');
const maskOptions = { mask: [{ mask: '+{7}(000)000-00-00' }, { mask: '0000-0000' }] };
const mask = IMask(element, maskOptions);
Other packages similar to imask
cleave.js
Cleave.js is another input masking library that provides similar functionalities to imask. It allows for formatting of input fields such as credit card numbers, phone numbers, dates, and more. Cleave.js is known for its simplicity and ease of use, but it may not offer as many customization options as imask.
jquery.inputmask
jquery.inputmask is a jQuery plugin for creating input masks. It supports a wide range of input types and provides robust masking capabilities. While it is powerful and flexible, it requires jQuery as a dependency, which may not be ideal for projects that do not use jQuery.
vanilla-text-mask
vanilla-text-mask is a pure JavaScript library for creating input masks. It is lightweight and does not have any dependencies, making it a good choice for projects that need a simple and efficient masking solution. However, it may not have as many advanced features as imask.
imaskjs
vanilla javascript input mask
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
Features
- get and set raw and unmasked values easily
- no external dependencies
- show placeholder always and only when necessary
- unmasked value can contain fixed parts
- optional input parts (greedy)
- RegExp mask
- Functional mask
- Number mask (integer and decimal)
- Date mask (various format support)
Further plans:
- Angular/React/Vue plugin
- on-the-fly/multimask
- more unit tests
- support RTL?
Install
npm install imask
and include from dist
folder or use CDN:
<script src="https://unpkg.com/imask"></script>
Build & test
npm run build
npm run test
Compatibility
Supports all major browsers and IE11+ need to support older?
Docs, Examples, Demo
https://unmanner.github.io/imaskjs/
Many thanks to
@Viktor Yakovlev
@Alexander Kiselev