cleave.js

Cleave.js is a small JavaScript helper that formats text inside an input field as the user types. Instead of writing complicated rules to insert spaces, dashes, or slashes into things like credit card numbers, phone numbers, dates, or large numerals, you point Cleave at an input element and tell it what kind of value it is meant to hold. The library then keeps the visible text neatly grouped and readable while the user is still typing, which makes long sequences of digits much less error-prone.

It works by wrapping a normal text input. You give it a CSS selector for the field and an options object describing the format, such as credit card mode, phone mode with a country code, or a custom pattern of delimiters, prefixes, and digit blocks. As keystrokes happen, Cleave rewrites the displayed value to match the chosen format, while still letting you read out the raw value when you need to send data to a backend. The README is explicit that Cleave is about readability, not validation, so checks for whether a card or phone number is actually valid still belong on the server.

You would reach for it when building forms where typed input is hard to scan, like checkout pages, signup flows, or admin tools that capture identifiers. It ships in several flavors so it can drop into different setups: a plain script tag, CommonJS, AMD, an ES Module build, a ReactJS component, and an AngularJS 1.x directive, with community TypeScript types available separately. The README also notes the project has been deprecated by its author, who points users to a successor project called cleave-zen.