<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="description" content="jQuery-Mask-Plugin - A jQuery plugin to make field masks" />
  <meta name="author" content="Igor Escobar" />
  <title>jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements.</title>

  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen">
  <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">

  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <!-- <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> -->
  <!-- <link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'> -->
  <style type="text/css">
    * {font-family: 'Lato', sans-serif;}
    .container {width:773px;}
    h1 {margin-bottom:10px}
    h1 .jq-label {font-size: 35px; color: #CFCFCF; display:block;margin:21px 2px 40px 13px;}
    h1 .plugin-name {font-size:140px; color: #6BBEC7;}
    span.subtitle {margin-bottom:20px;}
    div#examples div.col {width:246px;float:left;}

    div#examples div.col.center {text-align:center;}
    div#examples div.col.center.banner {border: 1px solid #ccc; padding:15px; margin-top:24px;}

    pre {overflow-x: auto; white-space:pre; word-wrap:normal; font-size:12px;}
  </style>
</head>
<body>
  <div class="container">
  <h1><span class="jq-label">jQuery</span> <span class="plugin-name">Mask Plugin</span></h1>
  <span class="subtitle">A jQuery Plugin to make masks on form fields and html elements.</span> <br /> <br />
  <h2>Demonstrations</h2> 

  <div id="examples">
    <div class="col">
      <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>Masks on div elements!</label>
      <div class="mask-on-div">12345678909</div> <input type="button" class="bt-mask-it" value="Mask it!"/>
    </div>
    <div class="col">
      <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"/>
      <label>IP Address</label>
      <input type="text" class="ip_address"/>
      <label>Percent</label>
      <input type="text" class="percent"/>
    </div>
    <div class="col center banner">
      <p>The <a href="http://igorescobar.github.com/jQuery-Mask-Plugin/">jQuery Mask Plugin</a> was written by <a href="http://www.igorescobar.com/" rel="author" target="_blank">Igor Escobar</a> and the source-code's available in <a href="https://github.com/igorescobar/jQuery-Mask-Plugin" target="_blank">GitHub</a>.</p>
      <h3>Buy me a beer :)</h3>
        <a href='https://pledgie.com/campaigns/22649'><img alt='Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !' src='https://pledgie.com/campaigns/22649.png?skin_name=chrome' border='0' ></a>
    </div>
  </div>
  <br clear="all"/><br clear="all"/><br clear="all"/>
  <div id="code-samples">
    <h1>Documentation</h1>
    <h2>Basic Usage Examples</h2>
<pre>
$(document).ready(function(){
  $('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
  $('.money2').mask("#.##0,00", {reverse: true, maxlength: false});
  $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}});
  $('.ip_address').mask('099.099.099.099');
  $('.percent').mask('##0,00%', {reverse: true});
);</pre>

    <h3>Callback Examples</h3>
<pre>
var options =  { 
  onComplete: function(cep) {
    alert('CEP Completed!:' + cep);
  },
  onKeyPress: function(cep, event, currentField, options){
    console.log('An key was pressed!:', cep, ' event: ', event, 
                'currentField: ', currentField, ' options: ', options);
  },
  onChange: function(cep){
    console.log('cep changed! ', cep);
  }
};

$('.cep_with_callback').mask('00000-000', options);
</pre>
    <h3>On-the-fly mask change</h3>
<pre>
var options =  {onKeyPress: function(cep){
  var masks = ['00000-000', '0-00-00-00'];
    mask = (cep.length>7) ? masks[1] : masks[0];
  $('.crazy_cep').mask(mask, this);
}};

$('.crazy_cep').mask('00000-000', options);
</pre>

    <h3>Mask as a function</h3>
<pre>
var celphoneMask = 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(celphoneMask);
</pre>
    
    <h3>Mask using data-mask attribute</h3>

    To get your mask applied with the data-mask attribute just use it as the same way you use with the $.mask function. <br/> <br/>
<pre>
&lt;input type=&quot;text&quot; name=&quot;field-name&quot; data-mask=&quot;00/00/0000&quot; /&gt;
</pre>

<h2>Customization</h2>

jQuery Mask Plugin has a few default options that you can overwrite as you like:

<pre>
var custom_options = {
  byPassKeys: [8, 9, 37, 38, 39, 40],
  translation: {
                '0': {pattern: /\d/}, 
                '9': {pattern: /\d/, optional: true}, 
                '#': {pattern: /\d/, recursive: true}, 
                'A': {pattern: /[a-zA-Z0-9]/}, 
                'S': {pattern: /[a-zA-Z]/}
            };
};</pre>
<strong> byPassKeys </strong> list of keyboard's <a href="http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes" target="_blank">keyCode</a> that you want to be ignored when it was pressed. <br />
<strong> translation </strong> object with all digits that should be interpreted as a special chars and its regex representation. <br />

<br />
<h3>Translation</h3>
Teach to jQuery Mask Plugin how to apply your mask: <br/><br/>

<pre>
// now the digit 0 on your mask pattern will be interpreted 
// as valid characters like 0,1,2,3,4,5,6,7,8,9 and *
$('.your-field').mask('00/00/0000', {'translation': {0: {pattern: /[0-9*]/}});
</pre>

    By default, jQuery Mask Plugin only reconizes the logical digit A (Numbers and Letters) and S (A-Za-z) but
    you can extend or modify this behaviour by telling to jQuery Mask Plugin how to interpret those logical digits. <br/><br/>

<pre>
$('.your-field').mask('AA/SS/YYYY', {'translation': {
                                        A: {pattern: /[A-Za-z0-9]/}, 
                                        S: {pattern: /[A-Za-z]/},  
                                        Y: {pattern: /[0-9]/}
                                      }
                                });
</pre>
    Now jQuery Mask Plugin knows the logic digit Y and you can create your own pattern. <br/><br/>

    <h4>Optional digits</h4>  <br/>

    You can also tell to jQuery Mask which digit is optional, to create a IP mask for example: <br/><br/>

<pre>
// way 1
$('.ip_address').mask('099.099.099.099');
// way 2
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation:  {'Z': {pattern: /[0-9]/, optional: true}}});
</pre>

    Now, all <strong>Z</strong> digits in your masks is optional. <br /> <br />

    <h4>Recursive digits</h4> <br/>

    With jQuery Mask Plugin you can also define recursive patterns inside your mask: <br/><br/>
    <pre>$('.money_example').mask('#.##0,00', {reverse: true});</pre>
    With example above the mask will be placed from the right to the left (that's why reverse:true is defined). As soon as you start typing, a "0,00" will be applied followed by repeating recursively the following pattern "#.##". The result could be something like: 1.234.567,890. <br /><br />

    You can also use that kind of feature to define what kind of data could be typed inside of a field:
    <pre>$('.example').mask('0#');</pre>
    Now only numbers will be allowed inside your form field and no maxlength will be set.

    <br/><br /><h3>Removing the mask</h3>
    <pre>$('.date').unmask();</pre>

    <br/><br /><h3>Getting the unmasked typed value</h3>
    <pre>$('.date').data('mask').getCleanVal();</pre>

    <h4>Default Mask Legend</h4>
    <ul>
      <li><strong>0</strong>: Only Numbers.</li>
      <li><strong>9</strong>: Only Numbers but optional.</li>
      <li><strong>#</strong>: Only Numbers but recusive.</li>
      <li><strong>A</strong>: Numbers and Letters.</li>
      <li><strong>S</strong>: Only A-Z and a-z characters.</li>
    </ul>

  </div>

<br clear="all" />

</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<script type="text/javascript" src="include/hotkeys/jquery.hotkeys.js"></script>





<script type="text/javascript">
  $(function() {
    $('.date').mask('00/00/0000');
    $('.time').mask('00:00:00');
    $('.date_time').mask('00/00/0000 00:00:00');
    $('.cep').mask('00000-000');
    $('.phone').mask('0000-0000');
    $('.phone_with_ddd').mask('(00) 0000-0000');
    $('.phone_us').mask('(000) 000-0000');
    $('.mixed').mask('AAA 000-S0S');
    $('.ip_address').mask('099.099.099.099');
    $('.percent').mask('##0,00%', {reverse: true});

    $('.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('000.000.000-00', {reverse: true});
    $('.money').mask('#.##0,00', {reverse: true, maxlength: false});

    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('(00) 00009-0000');

    $(".bt-mask-it").click(function(){
      $(".mask-on-div").mask("000.000.000-00");
      $(".mask-on-div").fadeOut(500).fadeIn(500)
    })

  });
</script>
</body>
</html>