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

Last update: Aug 8, 2022

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

Negative numbers, or currency related problems

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

GitHub

https://github.com/igorescobar/jQuery-Mask-Plugin
Comments
  • 1. Campo com n caracteres

    Gostaria de saber como eu fa√ßo para inserir um campo onde s√≥ pode letras mas o tamanho do campo √© din√Ęmico tipo 500 caracteres. eu sei colocar somente caracteres: $(".cnpj").mask("SSSSS......"); S√≥ que n posso limitar e tamb√©m n vou contar 500 S entende. Como posso arrumar isto???

    Reviewed by guitutilo at 2013-09-04 17:08
  • 2. Mask not applied to dynamically loaded input field

    I have a page which loads the jquery mask plugin. Then, when clicking a button, the page dynamically loads a new input=text field. However, this new input field does not have the mask applied to it - I have tried with both the $.mask and data-mask attribute.

    Reviewed by jolyon2000 at 2013-10-23 14:22
  • 3. Translation defaults pull

    Added defaults option for translation. This should let the user type the mask without typing one of the characters in the pattern.

    Original challenge here: http://stackoverflow.com/q/24676645/1449624

    Note: I'm new to github, I just want to improve jQuery mask plugin :+1:

    Reviewed by A1rPun at 2014-07-18 18:56
  • 4. Par√Ęmetro para desabilitar o data-mask watcher

    Esse PR é só pra ilustrar melhor a ideia que eu tive. Ele teoricamente corrige a issue #205 Fiz ele baseado na minha necessidade específica, mas pode e deve ser alterado para atender melhor o plugin como um todo e não somente uma necessidade. Para verificar a alteração, quando desejar não observar o data-mask basta criar esse objeto antes de importar o plugin:

    $.fn.maskGlobalOptions = {
        watchDataMask: true
    };
    
    Reviewed by vitorlopez at 2014-10-16 19:48
  • 5. data-mask not working

    Hi, is data-mask working or im doing something wrong?

    Here is a jsfiddle: http://jsfiddle.net/tmEHm/

    And as a second question, how i can use data-mask with options? Something like:

    $('input[data-mask]').mask(null, {
        reverse: true,
        byPassKeys: [9, 37, 38, 39, 40]
    });
    

    null doesnt work, and if i use for example '0', all the masks are applied to that.

    Thanks!

    Reviewed by felixjet at 2013-12-04 17:09
  • 6. Setting values programmaticly after initiating the mask

    So I have the mask working when the text box is being typed into. I need to set the initial value of the box. Link to example is below:

    http://jsfiddle.net/6pco4om7/32/

    The results are that the value is set, but the mask is no longer applied until the boxes is typed into. Is there a good way to refresh the box with the mask after a value has been set?

    Thanks!

    Reviewed by toddaa at 2015-01-22 22:47
  • 7. dev: fix: Any occurance of Mask will push the cursor to one position ‚Ķ

    …back (AKA Reverse)

    Issue:

    • Any occurance of Mask anywhere in the val() will push the input by one.
    • Example: If your mask is $('#div').mask('12/19'); (Credit card expiry), the value will become ('12/91') (Here after you enter 1, the cursor will move backward. Hence this fix will address the issue.

    Fix Description:

    • Basically this fix will make sure the cursor is at the end position of the val.
    • For browsers, they don't support it, there is a graceful fallback

    More details:

    • Please refer to : https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
    • More info: https://stackoverflow.com/a/17780924/1625557
    Reviewed by rupeshdabbir at 2017-09-01 06:34
  • 8. Formata√ß√£o tardia

    Prezados, fiz um teste com a vers√£o v1.1.1 do plugin para testar uma m√°scara din√Ęmica entre CPF e CNPJ. O c√≥digo est√° em http://jsfiddle.net/zWPs7/1/, o √ļnico detalhe adicional √© que no meu c√≥digo "d.byPassKeys = [];". O que ocorre √© que quando digito um n√ļmero 12345678900 a m√°scara formata corretamente tal n√ļmero como CPF, mas, se eu digitar mais um d√≠gito (ex.: 123456789000), em vez da m√°scara chavear para m√°scara de CNPJ exibindo 12.345.678/9000, a m√°scara continua com o formato do CPF exibindo 123.456.789-000. Da mesma forma ocorre ao apagar d√≠gitos, √© como se a m√°scara estivesse "demorando um d√≠gito a mais para chavear". Lembrando que na vers√£o v0.11.4 a mudan√ßa de m√°scara funcionava corretamente.

    Reviewed by germanolucas at 2013-08-26 18:36
  • 9. Flexible mask length

    Hello, I'm using your plugin to create generic masks, like "only letters", "only numbers". It's more simple than use regex and clean the wrong chars.

    I don't know if you want to merge, or use the idea in other way, but the change was made on that commit :).

    Thanks for the plugin :+1: .

    []'s

    Reviewed by era at 2013-02-21 03:01
  • 10. Number mask doesn't work as expected with input type = "number"

    I have a field for a South African postal code (4 digits), and my mask looks like this $('.postal-code').mask('0000');

    If the type of the input is text, it works as expected, if the type is "number" then any text entered removes all the text in the textbox (including the valid parts) i.e 333 and then 'f' will clear the textbox out.

    I want to use type = "number" because I am making a mobile web app, and want the on screen keyboard to display numbers.

    Reviewed by leebrooks0 at 2013-05-31 12:27
  • 11. Mask triggering 'change' event on 'blur'

    Try to click the input and then click out of it, without typing anything. It will trigger 'change' event without any change. Would this be happening because it's masking the input value again, everytime blur triggers? Any alternative to use change event when a change really happens?

    JSfiddle: http://jsfiddle.net/6pco4om7/3/

    Reviewed by 4n0n1mo at 2014-10-20 16:03
  • 12. Bump grunt from 1.0.4 to 1.5.3

    Bumps grunt from 1.0.4 to 1.5.3.

    Release notes

    Sourced from grunt's releases.

    v1.5.3

    • Merge pull request #1745 from gruntjs/fix-copy-op 572d79b
    • Patch up race condition in symlink copying. 58016ff
    • Merge pull request #1746 from JamieSlome/patch-1 0749e1d
    • Create SECURITY.md 69b7c50

    https://github.com/gruntjs/grunt/compare/v1.5.2...v1.5.3

    v1.5.2

    • Update Changelog 7f15fd5
    • Merge pull request #1743 from gruntjs/cleanup-link b0ec6e1
    • Clean up link handling 433f91b

    https://github.com/gruntjs/grunt/compare/v1.5.1...v1.5.2

    v1.5.1

    • Merge pull request #1742 from gruntjs/update-symlink-test ad22608
    • Fix symlink test 0652305

    https://github.com/gruntjs/grunt/compare/v1.5.0...v1.5.1

    v1.5.0

    • Updated changelog b2b2c2b
    • Merge pull request #1740 from gruntjs/update-deps-22-10 3eda6ae
    • Update testing matrix 47d32de
    • More updates 2e9161c
    • Remove console log 04b960e
    • Update dependencies, tests... aad3d45
    • Merge pull request #1736 from justlep/main fdc7056
    • support .cjs extension e35fe54

    https://github.com/gruntjs/grunt/compare/v1.4.1...v1.5.0

    v1.4.1

    • Update Changelog e7625e5
    • Merge pull request #1731 from gruntjs/update-options 5d67e34
    • Fix ci install d13bf88
    • Switch to Actions 08896ae
    • Update grunt-known-options eee0673
    • Add note about a breaking change 1b6e288

    https://github.com/gruntjs/grunt/compare/v1.4.0...v1.4.1

    v1.4.0

    • Merge pull request #1728 from gruntjs/update-deps-changelog 63b2e89
    • Update changelog and util dep 106ed17
    • Merge pull request #1727 from gruntjs/update-deps-apr 49de70b
    • Update CLI and nodeunit 47cf8b6
    • Merge pull request #1722 from gruntjs/update-through e86db1c
    • Update deps 4952368

    ... (truncated)

    Changelog

    Sourced from grunt's changelog.

    v1.5.3 date: 2022-04-23 changes: - Patch up race condition in symlink copying. v1.5.2 date: 2022-04-12 changes: - Unlink symlinks when copy destination is a symlink. v1.5.1 date: 2022-04-11 changes: - Fixed symlink destination handling. v1.5.0 date: 2022-04-10 changes: - Updated dependencies. - Add symlink handling for copying files. v1.4.1 date: 2021-05-24 changes: - Fix --preload option to be a known option - Switch to GitHub Actions v1.4.0 date: 2021-04-21 changes: - Security fixes in production and dev dependencies - Liftup/Liftoff upgrade breaking change. Update your scripts to use --preload instead of --require. Ref: https://github.com/js-cli/js-liftoff/commit/e7a969d6706e730d90abb4e24d3cb4d3bce06ddb. v1.3.0 date: 2020-08-18 changes: - Switch to use safeLoad for loading YML files via file.readYAML. - Upgrade legacy-log to ~3.0.0. - Upgrade legacy-util to ~2.0.0. v1.2.1 date: 2020-07-07 changes: - Remove path-is-absolute dependency. (PR: gruntjs/grunt#1715) v1.2.0 date: 2020-07-03 changes: - Allow usage of grunt plugins that are located in any location that is visible to Node.js and NPM, instead of node_modules directly inside package that have a dev dependency to these plugins. (PR: gruntjs/grunt#1677) - Removed coffeescript from dependencies. To ease transition, if coffeescript is still around, Grunt will attempt to load it. If it is not, and the user loads a CoffeeScript file, Grunt will print a useful error indicating that the coffeescript package should be installed as a dev dependency.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-05-25 23:09
  • 13. static value test added

    Added testMaskedVal method that returns the result of regexMask.test(p.val()).

    Added static method maskMatched that returns the result of testMaskedVal method.

    Updated existing focusout.mask event to reference testMaskedVal method.

    Reviewed by NoxelNyx at 2022-05-23 18:57
  • 14. How to remove Masking on Form Submit

    Have you take a look into our docs?

    https://igorescobar.github.io/jQuery-Mask-Plugin/

    Make sure your read this before opening a new issue:

    https://github.com/igorescobar/jQuery-Mask-Plugin#problems-or-questions

    Device

    PC

    Browser (and version)?

    Version 101.0.4951.67 (Official Build) (64-bit)

    Functional jsfiddle exemplifying your problem:

    You can use this one as exemple: http://jsfiddle.net/igorescobar/6pco4om7/

    Describe de problem depth:

    I have script to submit form using ajax method Post. I use thousand separator mask. I need to remove thousand separator on submit Form Before: 20.000 after : 20000

    Thanks in advance

    Reviewed by jajasuparja at 2022-05-17 14:21
  • 15. Bump ajv from 6.10.2 to 6.12.6

    Bumps ajv from 6.10.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@‚ÄčChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@‚Äčissacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@‚Äčsambauers, #1143) Option keywords to add custom keywords (@‚Äčfranciscomorais, #1137) Types fixes (@‚Äčboenrobot, @‚ÄčMattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @‚Äčcjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 05:00
  • 16. Donations dont work on your page

    I got this error when I tried donating to the project on you web page(https://igorescobar.github.io/jQuery-Mask-Plugin/)

    We can’t find this profile Make sure the link’s right and profile hasn’t been turned off.

    Reviewed by stccorp at 2021-12-15 04:10
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Mar 4, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

May 9, 2022
A Simple Input Form For Vue 3

vue-base-input (Vue 3) Base-input: I made it, for simplify a create form on my differents projects. Base-input return if your value is valid and value

Dec 13, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Apr 24, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Aug 15, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Jul 10, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

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

Aug 15, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Dec 9, 2021
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Jul 28, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

Aug 1, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Aug 3, 2022
A vue plugin of directive to make html elements dragable and to reorder items

A vue plugin of directive to make html elements dragable and to reorder items

Sep 15, 2019
Vue-form-generator custom fields for uiv without jquery dependency.

Vue-form-generator custom fields for uiv without jquery dependency.

Sep 20, 2017
Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

Nov 5, 2019
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

Aug 9, 2022
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

@tailwindcss/forms A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. Installation Note th

Aug 13, 2022
A dependency-free Vue plugin for formatting and validating credit card form fields.

A dependency-free Vue plugin for formatting and validating credit card form fields.

Jul 21, 2022
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

May 21, 2022
A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap

vue-formly-bootstrap A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap. Version 2 Note that this is version 2 of

Dec 31, 2020
Vue.js plugin that covers the Buefy form fields for Formly.

Vue.js plugin that covers the Buefy form fields for Formly. It lets you to validate input data in your forms. The plugin combine simplicity of the Formly form builder, lightness of the Buefy form fields and impeccability of the Bulma design.

Nov 16, 2020