jQuery Mask Plugin
A jQuery Plugin to make masks on form fields and HTML elements.
Documentation, Demos & Usage Examples
https://igorescobar.github.io/jQuery-Mask-Plugin/
Features
- 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.
- Sanitization.
- 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.
Want to buy me a beer? :heart_eyes:
http://paypal.me/igorcescobar
Install it via Package Managers
Bower
bower install jquery-mask-plugin
NPM
npm i jquery-mask-plugin
Meteor
meteor add igorescobar:jquery-mask-plugin
Packagist/Composer
composer require igorescobar/jquery-mask-plugin
CDNs
CDNjs
https://cdnjs.com/libraries/jquery.mask
JSDelivr
http://www.jsdelivr.com/projects/jquery.mask
RubyGems
gem 'jquery_mask_rails'
Tutorials
English
Portuguese
Fun (or not) facts
Compatibility
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+
Typescript support
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:
Bugs?
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.
Contributing
- 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)
Unit Tests
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 test/
folder.
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
grunt test
Contributors