# nosir/cleave.js **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/nosir-cleave-js).** 17,867 stars · 1,580 forks · JavaScript · Apache-2.0 ## Links - GitHub: https://github.com/nosir/cleave.js - Homepage: http://nosir.github.io/cleave.js - awesome-repositories: https://awesome-repositories.com/repository/nosir-cleave-js.md ## Topics `credit-card` `creditcard` `input` `input-mask` `telephone-number` ## Description Cleave.js is a JavaScript library that applies real-time visual formatting to form fields as users type. It provides specialized utilities to enforce visual patterns for credit cards, phone numbers, dates, times, and large numerals. The library includes predefined formatting rules for common data types, such as detecting credit card issuers to apply correct spacing and managing country-specific regional patterns for international phone numbers. It also supports large numeral grouping using Western, Indian, and Chinese numbering systems. Users can define custom input patterns using specific block lengths, delimiters, and prefixes to create specialized text constraints. The toolset also covers input management, allowing for the retrieval of both formatted and raw field values, programmatic value updates, and the cleanup of active event listeners. ## Tags ### User Interface & Experience - [Real-time Input Formatting](https://awesome-repositories.com/f/user-interface-experience/real-time-input-formatting.md) — Provides a JavaScript library for applying real-time visual formatting to form fields as users type. - [Credit Card Formatters](https://awesome-repositories.com/f/user-interface-experience/credit-card-formatters.md) — Provides real-time credit card number formatting with automatic issuer detection and appropriate spacing. ([source](https://github.com/nosir/cleave.js/blob/master/doc/options.md)) - [Phone Number Formatting](https://awesome-repositories.com/f/user-interface-experience/phone-number-formatting.md) — Applies country-specific regional patterns and spacing to phone number inputs in real-time. ([source](https://github.com/nosir/cleave.js/blob/master/doc/options.md)) - [Temporal Input Patterns](https://awesome-repositories.com/f/user-interface-experience/real-time-input-formatting/temporal-input-patterns.md) — Enforces standardized time patterns as users type to ensure consistent data entry. ([source](https://github.com/nosir/cleave.js/blob/master/doc/options.md)) - [Card Issuer Detection](https://awesome-repositories.com/f/user-interface-experience/card-issuer-detection.md) — Automatically detects credit card issuers using bank prefixes to switch to the correct spacing and formatting rules. - [Formatters](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/formatters.md) — Detects card issuers and applies correct spacing and delimiters to credit card input fields. - [Formatting](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/formatting.md) — Applies correct spacing and formatting to credit card number inputs based on detected issuers. - [Field Customization](https://awesome-repositories.com/f/user-interface-experience/field-customization.md) — Provides tools to create strict visual structures and constraints for text inputs using custom block lengths and delimiters. - [Input Value Extractors](https://awesome-repositories.com/f/user-interface-experience/input-value-extractors.md) — Enables extraction of either the formatted display string or the raw underlying value from input fields. ([source](https://github.com/nosir/cleave.js/blob/master/doc/public-methods.md)) - [Numeric Grouping](https://awesome-repositories.com/f/user-interface-experience/numeric-grouping.md) — Inserts thousands separators using Western, Indian, and Chinese numbering systems for better readability of large numerals. - [Numeric Inputs](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs.md) — Provides a specialized tool for inserting thousands separators using various international numbering styles in numeric inputs. - [Programmatic Input Formatters](https://awesome-repositories.com/f/user-interface-experience/programmatic-input-formatters.md) — Automatically applies configured formatting patterns when the raw value of a field is programmatically set. ([source](https://github.com/nosir/cleave.js/blob/master/doc/public-methods.md)) ### Development Tools & Productivity - [Date Formatting Utilities](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities.md) — Implements real-time date formatting and pattern enforcement for consistent user entry in form fields. ([source](https://github.com/nosir/cleave.js/blob/master/doc/options.md)) - [Date and Time Utilities](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities.md) — Enforces standardized date and time patterns in text inputs to ensure consistent data entry. - [Input Masking](https://awesome-repositories.com/f/development-tools-productivity/input-pointer-automation/input-customization/input-masking.md) — Constrains text entry using specific block lengths, custom delimiters, and prefixes to create specialized patterns. ([source](https://github.com/nosir/cleave.js#readme)) ### Software Engineering & Architecture - [Configuration-Driven Logic](https://awesome-repositories.com/f/software-engineering-architecture/data-logic-injection/configuration-driven-logic.md) — Uses configuration schemas to determine how different input types should be formatted with delimiters and blocks. - [State Mapping](https://awesome-repositories.com/f/software-engineering-architecture/state-mapping.md) — Maintains a separation between the raw user input and the formatted display string to ensure data integrity. - [String Tokenization](https://awesome-repositories.com/f/software-engineering-architecture/string-tokenization.md) — Breaks input strings into discrete blocks of predefined lengths to insert delimiters at specific intervals. ### Web Development - [Event Interception Utilities](https://awesome-repositories.com/f/web-development/event-interception-utilities.md) — Intercepts DOM input events to apply visual formatting patterns before the text is rendered to the screen. - [Numeric Formatting](https://awesome-repositories.com/f/web-development/numeric-fields/numeric-formatting.md) — Applies locale-specific thousands separators and numeric formatting for large numerals during user input. ([source](http://nosir.github.io/cleave.js/)) ### Data & Databases - [Input Masking](https://awesome-repositories.com/f/data-databases/date-and-time-libraries/input-masking.md) — Enforces consistent visual patterns for dates and times in form fields to prevent user entry errors.