imask

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}[phone]' }, { 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.

README

imaskjs

vanilla javascript input mask

Features

• get and set raw and unmasked values easily
• no external dependencies
• RegExp mask
• Functional mask
• Number mask (integer and decimal)
• Date mask (various format support)
• Dynamic/on-the-fly mask
• Pattern mask
  • show placeholder always and only when necessary
  • unmasked value can contain fixed parts
  • optional input parts (greedy)

Further plans

• Angular/React/Vue plugins
• more unit tests

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