Input Field Data Formatting Plugin For jQuery - Mask

Mask is a jQuery form plugin for auto-formatting input field values users input by using preset formats.

Features:

• String/Numeric/Alpha/Mixed masks.
• Reverse Mask.
• Data type validation.
• Automatic maxlength.
• Live event's for ajax/realtime apps.
• Advanced mask initialization.
• Callbacks.
• On-the-fly mask change.

How to use it:

1. Include jQuery library and jQuery.Mask.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mask.js"></script>

2. Javascript

<script type="text/javascript">
  $(function() {
    $('.date').mask('99/99/9999');
    $('.time').mask('99:99:99');
    $('.date_time').mask('99/99/9999 99:99:99');
    $('.cep').mask('99999-999');
    $('.phone').mask('9999-9999');
    $('.phone_with_ddd').mask('(99) 9999-9999');
    $('.phone_us').mask('(999) 999-9999');
    $('.mixed').mask('AAA 000-S0S');

    $('.cep_with_callback').mask('00000-000', {onComplete: function(cep) {
        console.log('Mask is done!:', cep);
      },
       onKeyPress: function(cep, event, currentField, options){
        console.log('An key was pressed!:', cep, ' event: ', event, 'currentField: ', currentField.attr('class'), ' options: ', options);
      }
    });

    $('.crazy_cep').mask('00000-000', {onKeyPress: function(cep){
      var masks = ['00000-000', '0-00-00-00'];
        mask = (cep.length>7) ? masks[1] : masks[0];
      $('.crazy_cep').mask(mask, this);
    }});

    $('.cpf').mask('999.999.999-99', {reverse: true});
    $('.money').mask('000.000.000.000.000,00', {reverse: true});

    var SaoPauloCelphoneMask = function(phone, e, currentField, options){
      return phone.match(/^(\(?11\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g) ? '(00) 00000-0000' : '(00) 0000-0000';
    };

    $(".sp_celphones").mask(SaoPauloCelphoneMask, { onKeyPress: function(phone, e, currentField, options){
      $(currentField).mask(SaoPauloCelphoneMask(phone), options);
    }});

  });
  </script>

3. Markup

<form>
<label>Date</label>
<input type="text" class="date"/>
<label>Hour</label>
<input type="text" class="time"/>
<label>Date &amp; Hour</label>
<input type="text" class="date_time"/>
<label>Zip-Code</label>
<input type="text" class="cep"/>
<label>Zip-Code With Callbacks</label>
<input type="text" class="cep_with_callback"/>
<label>Crazy Zip-Code</label>
<input type="text" class="crazy_cep"/>
<label>Money</label>
<input type="text" class="money"/>
<label>Telephone</label>
<input type="text" class="phone"/>
<label>Telephone with Code Area</label>
<input type="text" class="phone_with_ddd"/>
<label>US Telephone</label>
<input type="text" class="phone_us"/>
<label>São Paulo Celphones</label>
<input type="text" class="sp_celphones"/>
<label>Mixed Type Mask</label>
<input type="text" class="mixed"/>
<label>CPF</label>
<input type="text" class="cpf"/>
</form>

4. Default settings.

maskElements: 'input,td,span,div',
dataMaskAttr: '*[data-mask]',

// we mask data-mask elements by default
dataMask: true,

watchInterval: 300,

// watch for dynamically added inputs by default
watchInputs: true,

// by default we disabled the watcher for dynamically 
// added data-mask elements by default (performance reasons)
watchDataMask: false,

byPassKeys: [9, 16, 17, 18, 36, 37, 38, 39, 40, 91],
translation: {
  '0': {pattern: /\d/},
  '9': {pattern: /\d/, optional: true},
  '#': {pattern: /\d/, recursive: true},
  'A': {pattern: /[a-zA-Z0-9]/},
  'S': {pattern: /[a-zA-Z]/}
}

Changelog:

v1.14.16 (2019-08-01)

• Fixed oldVal being updated prior to caret position calculation
• Solve loading JQuery as module on Meteor

v1.14.15 (2018-03-09)

• StepUp Exception: undefined method `parse' for Time:Class

v1.14.13 (2017-12-12)

• fixes caret issue
• fixing use strict issue

v1.14.12 (2017-10-04)

• bug fixing on caret positioning on some devices

v1.14.11 (2017-05-31)

• fixing a lot of caret positioning issues

v1.14.10 (2017-02-14)

• fixing exception when oValue in undefined

v1.14.9 (2017-01-25)

• don’t use input event when using samsung browser or old chrome versions

v1.14.8 (2016-12-26)

• fixing caret on android with chrome 28

v1.14.7 (2016-12-25)

• improving caret positioning when cursor is on the middle
• fix caret positioning with multiple mask chars
• fixing reserved word
• fixing android cursor positioning (special thanks to @felipejunges and @fernandobandeira)

v1.14.3 (2016-11-28)

• fixing caret positioning on safari

v1.14.2 (2016-11-28)

• apply auto maxlength in case the mask doesn't have recursive pattern
• Fix input value mangling when inserting before a static mask character

v1.14.0 (2016-04-04)

• giving the opportunity to pass watchInputs locally

v1.13.9 (2016-03-21)

• giving the opportunity to pass watchInputs locally

v1.13.8 (2016-03-07)

• adding support for meteor
• fixing onChange behaviour
• fixing deploy procedure
• adding clearIfNotMatch to globalOptions
• fixing some bugs when using non-input elements
• fixing mobile issues.
• using input event when supported

v1.13.4 (2015-08-08)

• Add check to ensure that there are input elements before using them
• Change event wasnt being triggered in some cases

v1.13.1 (2015-07-07)

• Fixed: destroying input event
• Changed: removing the autocomplete default.
• Fixed: fixing bower file
• prevent glitch when invalid chars.
• turning off autocomplete when browsers doesn't support oninput event.
• giving an alternative to the autocomplete/autofill problem.

v1.11.4 (2015-02-27)

• grunt, jshint and better applyDataMask
• automated deploy to npm

v1.11.3 (2015-01-29)

• Added commonjs module definition

v1.11.2 (2014-12-27)

• Bugfixes
• implementing selectOnFocus and data-mask-selectonfocus option
• adding public method called: .applyDataMask in case you want to decide whether to apply masks in data-mask fields

v1.10.13 (2014-11-20)

• fixing bug with watchInputs feature when mask is used as a function and not a string.

v1.10.12 (2014-11-07)

• making a few improvements to make selection, copy events easier

v1.10.11 (2014-11-05)

• we need to revaluate dataMask flags everytime
• fixing dynamically data-mask added elements

v1.10.9 (2014-11-05)

• Fixed: data-mask wasnt working

v1.10.8 (2014-11-02)

• we dont need to seek for data-mask every time
• little optimization

v1.10.6 (2014-10-29)

• fixing weird cursor problems in weird cases.
• fixing dynamically added inputs wasnt working.
• fixing weird cursor problems in weird cases.

v1.10.4 (2014-10-23)

• fixing on the fly mask change feature.

v1.10.3 (2014-10-22)

• fixing unmask method.

v1.10.2.1 (2014-10-21)

• fixing onChange event behaviour

v1.10.0 (2014-10-20)

• adding a way to change global settings like translation object and the byPassKeys object.

v1.9.1 (2014-10-19)

• Bug fixed: cant convert circular json exception

v1.8.0 (2014-10-17)

• removing automatic maxlength support
• making a few optimizations to make it faster and retro compatible with other libraries
• creating globalOptions to make it more fast and flexible
• adding the fallback translation option
• fixing a bug

v1.7.8 (2014-10-15)

• change event may experience issues
• avoid maximum call stack trace error

v1.7.7 (2014-09-11)

• fixing clojure compile issue
• fixing clearifnotmatch in masks with literal digits

v1.7.5 (2014-09-10)

• fixing paste inside of empty fields.

v1.7.4 (2014-08-12)

• smaller and reliable code

v1.7.3 (2014-08-11)

• smaller code

v1.7.2 (2014-08-09)

• smaller code
• fixing remove bug

v1.7.1 (2014-08-08)

• fixing clearIfNotMatch feature in cases of optional and recursive digits

v1.6.5 (2014-06-30)

• fixing clearIfNotMatch feature in cases of optional and recursive digits

v1.6.4 (2014-05-09)

• fixing autofocus bug

v1.6.0 (2014-05-08)

• fixing autofocus bug
• adding support to the clearIfNotMatch option
• HTML5 placeholder support

v1.5.7 (2014-05-02)

• update to the latest version.

v1.5.5 (2014-04-28)

• update to the latest version.

v1.5.4 (2014-02-09)

• update to the latest version.

v1.5.2 (2013-12-21)

• update to the latest version.

v1.5.1 (2013-12-19)

• fixing getCleanVal()

v1.4.2 (2013-12-17)

• update to the latest version.

v1.4.1 (2013-12-10)

• update to the latest version.

v1.3.1 (2013-10-09)

• features updated and bugs fixed

---

This awesome jQuery plugin is developed by igorescobar. For more Advanced Usages, please check the demo page or visit the official website.