Shadowgraph
TrendingBuzzTop stargazers
Chrome extension
Sign in

igorescobar/jQuery-Mask-Plugin

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

JavaScript

4,753

80 commits

updated Dec 7, 2022

igorescobar.github.io/jQuery-Mask-Plugin

See the code

README

jQuery Mask Plugin

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

Build Status Code Climate jsDelivr Hits CDNJS

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? 😍

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

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:

How to integrate with React.js?

How to integrate with Angular.js?

How to integrate with Vue.js?

Problems with old versions of Android keyboard

Prefix or sufix on the Mask

Add validation?

Field type number, email not working?

Want to keep the placeholder as the user types?

E-mail mask?

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

html-element
javascript
jquery-mask-plugin
jquery-plugin
mask

Project health

Overall

2.4/10

Maintained

0/10

Code review

2/10
OpenSSF Scorecard

npm

jquery-mask-plugin

Latest release

1.14.16 · Jul 31, 2019

Releases this year

0

Significant stargazers

Frederik Prijck

176 followers · starred Apr 2017

Abner Soares Alves Junior

68 followers · starred Oct 2014

Ryan H. Lewis

363 followers · starred Sep 2014

Viktor

8 followers · starred Jan 2017

Similar repos

RobinHerbots/Inputmask

Input Mask plugin

6,455

uNmAnNeR/imaskjs

vanilla javascript input mask

5,182

digitalBush/jquery.maskedinput

jQuery Masked Input Plugin

2,092

text-mask/text-mask

Input mask for React, Angular, Ember, Vue, & plain JavaScript

8,204

taiga-family/maskito

Collection of libraries to create an input mask which ensures that user types value according to…

1,673

NepipenkoIgor/ngx-mask

Angular Plugin to make masks on form fields and html elements.

1,242

beholdr/maska

Simple zero-dependency input mask for Vue, Svelte, Alpine.js and vanilla JS.

2,021

sanniassin/react-input-mask

Input masking component for React. Made with attention to UX.

2,279

igorescobar/jQuery-Mask-Plugin

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

JavaScript

4,753

80 commits

updated Dec 7, 2022

igorescobar.github.io/jQuery-Mask-Plugin

See the code

README

jQuery Mask Plugin

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

Build Status Code Climate jsDelivr Hits CDNJS

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? 😍

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

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:

How to integrate with React.js?

How to integrate with Angular.js?

How to integrate with Vue.js?

Problems with old versions of Android keyboard

Prefix or sufix on the Mask

Add validation?

Field type number, email not working?

Want to keep the placeholder as the user types?

E-mail mask?

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

html-element
javascript
jquery-mask-plugin
jquery-plugin
mask

Project health

Overall

2.4/10

Maintained

0/10

Code review

2/10
OpenSSF Scorecard

npm

jquery-mask-plugin

Latest release

1.14.16 · Jul 31, 2019

Releases this year

0

Significant stargazers

Frederik Prijck

176 followers · starred Apr 2017

Abner Soares Alves Junior

68 followers · starred Oct 2014

Ryan H. Lewis

363 followers · starred Sep 2014

Viktor

8 followers · starred Jan 2017

Similar repos

RobinHerbots/Inputmask

Input Mask plugin

6,455

uNmAnNeR/imaskjs

vanilla javascript input mask

5,182

digitalBush/jquery.maskedinput

jQuery Masked Input Plugin

2,092

text-mask/text-mask

Input mask for React, Angular, Ember, Vue, & plain JavaScript

8,204

taiga-family/maskito

Collection of libraries to create an input mask which ensures that user types value according to…

1,673

NepipenkoIgor/ngx-mask

Angular Plugin to make masks on form fields and html elements.

1,242

beholdr/maska

Simple zero-dependency input mask for Vue, Svelte, Alpine.js and vanilla JS.

2,021

sanniassin/react-input-mask

Input masking component for React. Made with attention to UX.

2,279