# unmanner/imaskjs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/unmanner-imaskjs).**

5,187 stars · 274 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/uNmAnNeR/imaskjs
- Homepage: https://imask.js.org
- awesome-repositories: https://awesome-repositories.com/repository/unmanner-imaskjs.md

## Topics

`inputmask` `vanilla-js`

## Description

imaskjs is a JavaScript input mask library and DOM input manager used to enforce specific patterns, data types, and ranges on user input in real-time. It serves as a data formatting library and input validation tool that transforms raw input values into formatted strings using masks and custom pipes.

The project provides dynamic masking capabilities, allowing input patterns to change or switch in real-time based on the characters a user types. It supports complex input constraints including regular expressions, numerical ranges, date-based verification, and character enumerations.

The library covers a broad range of input processing and data management tasks, including pre- and post-processing transformations, raw value extraction for API submission, and the application of masks to both standard HTML input fields and contenteditable elements.

## Tags

### User Interface & Experience

- [Input Masks](https://awesome-repositories.com/f/user-interface-experience/input-masks.md) — Enforces specific formatting patterns, data types, and ranges on user input fields in real-time. ([source](https://cdn.jsdelivr.net/gh/unmanner/imaskjs@master/README.md))
- [Real-time Input Formatting](https://awesome-repositories.com/f/user-interface-experience/real-time-input-formatting.md) — Enforces specific patterns and data types in JavaScript text fields by dynamically formatting input as it is typed.
- [DOM Input Managers](https://awesome-repositories.com/f/user-interface-experience/dom-input-managers.md) — Applies formatting and constraints to standard HTML input fields and contenteditable elements.
- [Input Data Formatting](https://awesome-repositories.com/f/user-interface-experience/input-data-formatting.md) — Transforms raw user text into standardized, masked strings during the data entry phase. ([source](https://imask.js.org/guide.html))
- [Input Event Interceptors](https://awesome-repositories.com/f/user-interface-experience/input-event-interceptors.md) — Intercepts keyboard and input events to apply formatting in real-time before the browser updates the DOM.
- [Dynamic Mask Definitions](https://awesome-repositories.com/f/user-interface-experience/input-masking-patterns/dynamic-mask-definitions.md) — Creates input patterns that change on the fly based on the current value or custom logic. ([source](https://imask.js.org/api/))
- [Masking Libraries](https://awesome-repositories.com/f/user-interface-experience/input-masking-patterns/masking-libraries.md) — Provides a comprehensive JavaScript library for enforcing specific patterns, data types, and ranges on user input in real-time.
- [Pattern Constraints](https://awesome-repositories.com/f/user-interface-experience/input-masking-patterns/pattern-constraints.md) — Restricts user input to specific sequences of characters using predefined tokens and custom definitions. ([source](https://imask.js.org/guide.html))
- [Dynamic Masking](https://awesome-repositories.com/f/user-interface-experience/input-masks/dynamic-masking.md) — Changes the expected input pattern in real time based on what the user is typing or selecting.
- [Input Validation Constraints](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints.md) — Restricts text entry using regular expressions, numerical ranges, and date-based constraints.
- [Input Value Transformations](https://awesome-repositories.com/f/user-interface-experience/input-value-transformations.md) — Processes raw user input through a sequence of callbacks to format data in real time.
- [Real-Time Input Validation](https://awesome-repositories.com/f/user-interface-experience/real-time-input-validation.md) — Forces user input to match specific patterns, ranges, or types during the active typing process. ([source](https://imask.js.org/api/))
- [Input Element Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/html-element-wrappers/input-element-wrappers.md) — Provides a standardized wrapper to manage interactions across different input types, including text fields and contenteditable elements.
- [Field Customization](https://awesome-repositories.com/f/user-interface-experience/field-customization.md) — Modifies the processing and interaction logic of input strings via custom pipelines and callbacks.
- [Date Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-validation/date-input-validation.md) — Provides validation rules to restrict date inputs via temporal boundaries or custom logic. ([source](https://imask.js.org/guide.html))
- [Mask Behavior Configurations](https://awesome-repositories.com/f/user-interface-experience/input-masking-patterns/mask-behavior-configurations.md) — Controls how placeholders appear and manages how existing text is overwritten during the input process. ([source](https://imask.js.org/api/))
- [Value Synchronization](https://awesome-repositories.com/f/user-interface-experience/input-states/value-synchronization.md) — Maintains a clear distinction and synchronization between the formatted display string and the raw underlying data value.
- [Custom Logic Validation](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints/custom-logic-validation.md) — Executes custom validation functions to perform complex checks on input values beyond simple pattern matching. ([source](https://imask.js.org/guide.html))
- [Enumeration Constraints](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints/enumeration-constraints.md) — Limits user input to a specific set of allowed characters or strings from a provided enumeration. ([source](https://imask.js.org/guide.html))
- [Numeric Constraints](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints/numeric-constraints.md) — Limits input to integers or decimals with configurable scales, radix characters, and thousands separators. ([source](https://imask.js.org/guide.html))
- [Logic Customizers](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs/numeric-input-fields/formatting-customizers/logic-customizers.md) — Transforms input data using custom functions or pipes to apply specific formatting rules during typing. ([source](https://cdn.jsdelivr.net/gh/unmanner/imaskjs@master/README.md))

### Data & Databases

- [Field Value Extraction](https://awesome-repositories.com/f/data-databases/field-value-extraction.md) — Retrieves raw input data by removing formatting characters and placeholders for backend system submission. ([source](https://cdn.jsdelivr.net/gh/unmanner/imaskjs@master/README.md))
- [Raw Value Extraction](https://awesome-repositories.com/f/data-databases/field-value-extraction/formatted-value-extraction/raw-value-extraction.md) — Retrieves the underlying raw data separately from the formatted display string to ensure data integrity. ([source](https://imask.js.org/api/))
- [Raw Value Extraction](https://awesome-repositories.com/f/data-databases/raw-value-extraction.md) — Separates formatted display strings from raw values to ensure data integrity when sending input to an API.
- [Pattern-Based Validators](https://awesome-repositories.com/f/data-databases/structural-data-validators/pattern-based-validators.md) — Restricts user input by matching characters against predefined tokens or regular expressions.
- [Numeric Range Constraints](https://awesome-repositories.com/f/data-databases/data-querying/table-item-filters/numeric-range-filters/numeric-range-constraints/numeric-range-constraints.md) — Restricts number inputs to a specific minimum and maximum range to ensure data integrity. ([source](https://imask.js.org/))

### Security & Cryptography

- [Dynamic Mask Switching](https://awesome-repositories.com/f/security-cryptography/sensitive-data-access-controls/dynamic-mask-switching.md) — Selects the most appropriate mask from a collection based on the characters the user types in real time. ([source](https://imask.js.org/guide.html))

### Software Engineering & Architecture

- [Input Transformation Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/data-transformation-hooks/input-transformation-pipelines.md) — Processes values through a pipeline to convert or reformat data as it is entered. ([source](https://imask.js.org/api/))
- [Data Transformation Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/data-transformation-pipelines.md) — Transforms values through a sequence of custom conversion and formatting functions before they are displayed. ([source](https://imask.js.org/))
- [Range Constraints](https://awesome-repositories.com/f/software-engineering-architecture/optional-value-types/value-constraint-enforcers/range-constraints.md) — Enforces minimum and maximum numerical value thresholds for integer inputs. ([source](https://imask.js.org/guide.html))
- [Input](https://awesome-repositories.com/f/software-engineering-architecture/post-processing-hooks/input.md) — Transforms the final masked value using a callback after the user completes their interaction with the interface. ([source](https://imask.js.org/guide.html))
- [Regular Expression Validations](https://awesome-repositories.com/f/software-engineering-architecture/regular-expression-validations.md) — Forces user input to match specific patterns using regular expressions or fixed patterns. ([source](https://imask.js.org/))
- [Input Pre-processing Hooks](https://awesome-repositories.com/f/software-engineering-architecture/transformation-pipelines/input-processing-pipelines/input-processing-scripts/input-pre-processing-hooks.md) — Modifies input characters or strings using callbacks before the system applies them to the active mask. ([source](https://imask.js.org/guide.html))

### Web Development

- [Form Data Validation](https://awesome-repositories.com/f/web-development/form-data-validation.md) — Restricts input values to specific ranges, dates, or enumerations to prevent invalid data submission.

### Part of an Awesome List

- [Miscellaneous Tools](https://awesome-repositories.com/f/awesome-lists/more/miscellaneous-tools.md) — Input masking library for JavaScript.