Icontem

jQuery Mask Plugin: Filter characters typed in form inputs using masks

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (30)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-05-31 (24 days ago) RSS 2.0 feedNot enough user ratingsTotal: 278 This week: 1All time: 152 This week: 10Up
Version License JavaScript version Categories
jquery-mask-plugin 1.0MIT/X Consortium ...1.0Validation, jQuery
Description Author

This is a jQuery plugin that filters characters typed in form inputs using masks.

It can associate a mask that defines the characters and format of text that is accepted in a HTML form input.

The mask may be made of letters, digits and other separator characters. Alternatively it may also invoke a callback function to implement custom filters.

Name: Igor Escobar <contact>
Classes: 3 packages by
Country: Brazil Brazil
Age: 29
All time rank: 475 in Brazil Brazil
Week rank: 11 Up1 in Brazil Brazil Up
Innovation award
Innovation award
Nominee: 1x

Details
# jQuery Mask Plugin
A jQuery Plugin to make masks on form fields and HTML elements.

[![Build Status](https://travis-ci.org/igorescobar/jQuery-Mask-Plugin.png)](https://travis-ci.org/igorescobar/jQuery-Mask-Plugin)
[![Code Climate](https://codeclimate.com/github/igorescobar/jQuery-Mask-Plugin.png)](https://codeclimate.com/github/igorescobar/jQuery-Mask-Plugin)

# 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.

## 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
```ruby
gem 'jquery_mask_rails' # more details at http://bit.ly/jquery-mask-gem
```

## Tutorials
### English
  * [Masks with jQuery Mask Plugin](http://bit.ly/masks-with-jquery-mask-plugin)
  * [Using jQuery Mask Plugin With Zepto.js](http://bit.ly/using-jquery-mask-plugin-with-zeptojs)

### Portuguese
  * [Mascaras com JQuery Mask Plugin](http://bit.ly/mascaras-com-jquery-mask-plugin)
  * [Mascara Javascript para os novos telefones de São Paulo](http://bit.ly/mascara-javascript-para-os-novos-telefones-de-sao-paulo)

### Fun (or not) facts
  * [I’ve had the chance to troll Donald Trump. But I didn’t.](http://www.igorescobar.com/blog/2016/08/21/ive-the-chance-to-troll-donald-trump-but-i-didnt/)

## 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](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery-mask-plugin).

To install, open terminal and navigate to your working directory.

### Typescript 1.x users
  * Install [typings](https://github.com/typings/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: 
* [Typings](https://github.com/typings/typings)
* [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
* [Typescript](https://github.com/Microsoft/TypeScript)


## Problems or Questions?
Before opening a new [issue](https://github.com/igorescobar/jQuery-Mask-Plugin/issues) take a look on those frequently asked questions:
#### [How to integrate with React.js?](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/498)
#### [How to integrate with Angular.js?](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/499)
#### [Problems with old versions of Android keyboard](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/135)
#### [Negative numbers, or currency related problems](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/436#issuecomment-253176511)
#### [Prefix or sufix on the Mask](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/166)
#### [Add validation?](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/387#issuecomment-192998092)
#### [Field type number, email not working?](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/450#issuecomment-253225719)
#### [Want to keep the placeholder as the user types?](https://github.com/igorescobar/jQuery-Mask-Plugin/issues/450#issuecomment-253225719)

## Bugs?
Did you read our [docs](https://igorescobar.github.io/jQuery-Mask-Plugin/)? Yes? Cool! So now... make sure that you have a *functional* [jsfiddle](http://jsfiddle.net/) exemplifying your problem and open an [issue](https://github.com/igorescobar/jQuery-Mask-Plugin/issues) for us. Don't know how to do it? Use this [fiddle example](http://jsfiddle.net/igorescobar/6pco4om7/).

## Contributing
 * **Bug Reporting**: Yes! You can contribute opening [issues](https://github.com/igorescobar/jQuery-Mask-Plugin/issues)!
 * **Documenting**: Do you think that something in our [docs](https://github.com/igorescobar/jQuery-Mask-Plugin/tree/gh-pages) 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](https://github.com/igorescobar/jQuery-Mask-Plugin/tree/master/test) to make sure that everything are working propertly.
 * **Improving**: Open an [issue](https://github.com/igorescobar/jQuery-Mask-Plugin/issues) 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](http://qunitjs.com/) and [GruntJS](http://gruntjs.com/). 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](https://www.docker.com/) here is how you can use it:
```bash
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
 * [Igor Lima](https://github.com/igorlima)
 * [Mark Simmons](https://github.com/Markipelago)
 * [Gabriel Schammah](https://github.com/gschammah)
 * [Marcelo Manzan](https://github.com/kawamanza)
 * [See the full list](https://github.com/igorescobar/jQuery-Mask-Plugin/graphs/contributors)

## Help us!
[![Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !](https://pledgie.com/campaigns/22649.png?skin_name=chrome)](https://pledgie.com/campaigns/22649)

[![Flattr this](https://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=igorescobar&url=https%3A%2F%2Fflattr.com%2Fprofile%2Figorescobar)

## Donators (Thanks!)
 * Rinaldo Morato
 * [Marcelo Otowicz](http://www.ofen.com.br/)
 * Marcia Cristina Cava
 * [Igor Lima](https://github.com/igorlima)
 * Steve Binder
 * Douglas Patrocinio
 * Paulo Diogo Rodrigues Leão
 * Dorijan Covran
 * Amaro Mariño Malvido
 * Mark Guadagna
 * Serdar Selim Tulunoğlu
 * [Software Download](http://software-download.name)
 * [Full list](https://pledgie.com/campaigns/22649#donors)
Screenshots  
  • Logo
  • Examples
  Files folder image Files  
File Role Description
Files folder imagedist (2 files)
Files folder imagesrc (1 file)
Files folder imagetest (13 files, 1 directory)
Accessible without login Plain text file .jshintrc Data Auxiliary data
Accessible without login Plain text file .ruby-version Data Auxiliary data
Accessible without login Plain text file bower.json Data Auxiliary data
Accessible without login Plain text file CHANGELOG.md Example Example script
Accessible without login Plain text file component.json Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file docker-compose.yml Data Auxiliary data
Accessible without login Plain text file Dockerfile Data Auxiliary data
Accessible without login Plain text file LICENSE Data Auxiliary data
Accessible without login Plain text file package.js Aux. Auxiliary script
Accessible without login Plain text file README.md Data License text

  Files folder image Files  /  dist  
File Role Description
  Plain text file jquery.mask.js Class Class source
  Plain text file jquery.mask.min.js Class Class source

  Files folder image Files  /  src  
File Role Description
  Plain text file jquery.mask.js Class Class source

  Files folder image Files  /  test  
File Role Description
Files folder imagezepto (3 files)
  Accessible without login Plain text file jquery.mask.test.js Test Unit test script
  Accessible without login Plain text file qunit.css Data Auxiliary data
  Accessible without login Plain text file qunit.js Test Unit test script
  Plain text file sinon-1.10.3.js Class Class source
  Accessible without login Plain text file sinon-qunit-1.0.0.js Aux. Auxiliary script
  Accessible without login Plain text file sinon-qunit.js Aux. Auxiliary script
  Accessible without login HTML file test-for-jquery-1.11.1.html Doc. Documentation
  Accessible without login HTML file test-for-jquery-1.7.2.html Doc. Documentation
  Accessible without login HTML file test-for-jquery-1.8.3.html Doc. Documentation
  Accessible without login HTML file test-for-jquery-1.9.1.html Doc. Documentation
  Accessible without login HTML file test-for-jquery-2.1.1.html Doc. Documentation
  Accessible without login HTML file test-for-jquery-3.0.0.html Doc. Documentation
  Accessible without login HTML file test-for-zepto.html Data Auxiliary data

  Files folder image Files  /  test  /  zepto  
File Role Description
  Accessible without login Plain text file data.js Test Unit test script
  Accessible without login Plain text file event.js Test Unit test script
  Accessible without login Plain text file zepto.min.js Test Unit test script

 Version Control Unique User Downloads Download Rankings  
 93%
Total:278
This week:1
All time:152
This week:10Up