jQuery-Mask-Plugin
A jQuery Plugin to make masks on form fields and HTML elements.
A tiny jQuery library that automatically formats form fields as users type, inserting separators for phone numbers, dates, credit cards, and any custom pattern you define.
jQuery Mask Plugin is a small JavaScript library that controls how users type into form fields on a webpage. It applies a "mask," which is a pattern that formats or restricts input as it is typed. Common examples include phone numbers formatted as (555) 123-4567, dates as 31/12/2024, or credit card numbers split into groups of four digits. The mask takes care of inserting the separators automatically, so the user just types the digits and the field arranges them correctly.
The library works by attaching to any form input or HTML element through jQuery, a popular JavaScript utility. You specify the pattern you want using a simple format string, and the plugin handles the rest at the browser level, with no server involved. It supports plain numeric masks, alphabetic masks, and mixed patterns. There is also support for reverse masks, which are useful for currency fields where the decimal point stays fixed as the user types from right to left.
Beyond basic formatting, the plugin supports optional digits, fallback patterns when a field does not match, and the ability to change or remove a mask after it has been applied. It works with HTML data attributes, so a developer can configure masks directly in the HTML markup without writing additional JavaScript. The library is compatible with React, Angular, Vue, and Zepto in addition to standard jQuery setups.
At around 2 kilobytes when compressed, it is designed to add minimal weight to a page. It has been tested across a wide range of browsers including older versions of Internet Explorer, Chrome, Firefox, Safari, Opera, and Android browsers.
Installation is available through npm, Bower, Composer, and Meteor. A CDN link is also available for use without a package manager. Full documentation and live demos are hosted on the project's GitHub Pages site.
Where it fits
- Add automatic phone number formatting so users see (555) 123-4567 as they type digits into a contact form.
- Apply a date input mask so users always enter dates in DD/MM/YYYY format without typing slashes manually.
- Create a currency field where the decimal point stays fixed as the user types from right to left.
- Configure input masks directly in HTML using data attributes without writing extra JavaScript.