July 1, 2015
Mask plugin | A jQuery Plugin to make masks on form fields.
Mask plugin is a jQuery Plugin to make masks on form fields and HTML elements.
Created by Igor Escobar
jQuery Mask Plugin
A jQuery Plugin to make masks on form fields and HTML elements.
Documentation, Demos & Usage Examples
- Lightweight (~2kb minified, ~1kb gziped).
- Built-in support for dynamically added elements.
- Masks on any HTML element (no need to server-side mask anymore!)!
- HTML notation support (data-mask, data-mask-recursive, data-mask-clearifnotmatch).
- String/Numeric/Alpha/Mixed masks.
- Reverse mask support for masks on numeric fields.
- Optional digits.
- Recursive Digits.
- Fallback Digits.
- Advanced mask initialization.
- Advanced Callbacks.
- On-the-fly mask change.
- Mask removal.
- Full customization.
- Compatibility with React/UMD/Zepto.js/Angular.JS.
- HTML5 placeholder support.
- Clear the field if it not matches support.
Install it via Package Managers
bower install jquery-mask-plugin
npm i jquery-mask-plugin
meteor add igorescobar:jquery-mask-plugin
composer require igorescobar/jquery-mask-plugin
gem 'jquery_mask_rails' # more details at http://bit.ly/jquery-mask-gem
Fun (or not) facts
jQuery Mask Plugin has been tested with jQuery 1.7+ on all major browsers:
- Firefox 2+ (Win, Mac, Linux);
- IE7+ (Win);
- Chrome 6+ (Win, Mac, Linux, Android, iPhone);
- Safari 3.2+ (Win, Mac, iPhone);
- Opera 8+ (Win, Mac, Linux, Android, iPhone).
- Android Default Browser v4+
Definition can be found here.
To install, open terminal and navigate to your working directory.
Typescript 1.x users
- Install typings by running
npm install typings --global.
- Then install the definition by running
typings install dt~jquery-mask-plugin --global --save.
Typescript 2.x users
- Use npm
npm install --save-dev @types/jquery-mask-plugin.
For configuration options and troubleshooting refer to these repositories:
Problems or Questions?
Before opening a new issue take a look on those frequently asked questions:
Did you read our docs? Yes? Cool! So now... make sure that you have a functional jsfiddle exemplifying your problem and open an issue for us. Don't know how to do it? Use this fiddle example.
- Bug Reporting: Yes! You can contribute opening issues!
- Documenting: Do you think that something in our docs should be better? Do you have a cool idea to increase the awesomeness? Summit your pull request with your idea!
- Bug Fixing: No time to lose? Fix it and help others! Write some tests to make sure that everything are working propertly.
- Improving: Open an issue and lets discuss it. Just to make sure that you're on the right track.
- Sharing: Yes! Have we saved some of your time? Are you enjoying our mask plugin? Sharing is caring! Tweet it! Facebook it! Linkedin It(?!) :D
- Donating: Hey, now that you don't need to worry about masks again... buy me a coffee, beer or a PlayStation 4 (Xbox One also accepted!) :o)
We use QUnit and GruntJS. To run our test suit is just run:
grunt test in your console or you can open those
test-for*.html files inside of our
In case you're familiar with Docker here is how you can use it:
docker build -t jquery-mask .
CONTAINER_ID=$(docker run -d -v $PWD:/app/jquery-mask-plugin jquery-mask)
docker exec $CONTAINER_ID sh -c "npm install"
docker exec -it $CONTAINER_ID /bin/bash