Universal Input Mask Plugin For Text Fields - jQuery ClassMask

In today's world, filling out forms can be tricky. Between email, phone, and number formats, it seems there's a different way of typing data into every field. No matter if you're typing these values manually or via a web form, this can lead to a considerable amount of wasted time just trying to get your data typed in properly.

Input mask is a tool that helps us to enter the data in the specific format and also reminds us the data format so that we don't have to take stress about anything.

This ClassMask input mask jQuery Plugin makes it possible to format and validate different data types like email, phone, number, money, zip, date, etc. in any input text field. It's flexible, simple to use and easy to extend to use your own rules.

See Also:

• 10 Best Input Mask Plugins In JavaScript

How to use it:

1. Load the class-mask-app.min.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/class-mask-app.min.js"></script>

2. Then add the following mask classes to your text fields.

• mask_number
• mask_string_upper
• mask_string_capitalize
• mask_money
• mask_fraction_medium
• mask_fraction_full
• mask_phone
• mask_cell
• mask_phones
• mask_cpf
• mask_cnpj
• mask_document
• mask_email
• mask_date
• mask_zip

<input class="mask_number" placeholder="0-9" id="number" name="number" type="text" />
...

3. Or load the class-mask.min.js script after jQuery, then add a jQuery event, call the classMask method to format the value.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/class-mask.min.js"></script>

$(document).ready(function () {
  /*
   *  Any one of these parameters.
   *  number|stringToUpper|stringToName|email|date|phone
   *  cell|phoneAndCell|cpf|cnpj|cpfAndCnpj|zip
   *  money|fractionMedium|fractionFull
   */
  $('.demo').on('keyup.demo_number', function () {
    $(this).val($(this).val().classMask('number'));
  });
});

4. It provides a functionality to count the number of characters typed in a textarea element.

<form class="sheet-content">
  <div class="note">
    <label for="note">Length characters</label>
    <textarea maxlength="200" rows="3" placeholder="Write something..." id="note" name="note" cols="50"></textarea>
  </div>
</form>

5. It also works as a vanilla JavaScript plugin.

<input id="event_number" type="text">

function maskText(event) {
  /*
   *  Any one of these parameters.
   *  number|stringToUpper|stringToName|email|date|phone
   *  cell|phoneAndCell|cpf|cnpj|cpfAndCnpj|zip
   *  money|fractionMedium|fractionFull
   */
  event.target.value = event.target.value.classMask('number');
}

function load() {
  document.getElementById('event_number').addEventListener('keyup', maskText, false);
}

document.addEventListener('DOMContentLoaded', load, false);

---

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