Input Field Data Formatting Plugin For jQuery - Mask

File Size: 131 KB
Views Total: 55016
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.