jQuery Mask Plugin

jQuery Mask Plugin - плагин на jquery для создания масок в полях формы. Поддерживает огромное кол-во различных типов полей, от банковских карт до ip адресов.

Особенности плагина:

• Легкий (~ 2kb минимизированный, ~ 1kb gziped).
• Встроенная поддержка динамически добавляемых элементов.
• Маски для любого элемента HTML (больше не нужно маскировать на стороне сервера)
• Поддержка нотации HTML (data-mask, data-mask-recursive, data-mask-clearifnotmatch).
• Необязательные цифры.
• Рекурсивные цифры.
• Резервные цифры.
• Расширенная инициализация маски.
• Расширенные обратные вызовы.
• Смена маски на лету.
• Удаление маски.
• Полная настройка.
• Совместимость с React / UMD / Zepto.js / Angular.JS.
• Поддержка заполнителя HTML5.
• Очистка полей, если они не соответствует формату.

Как установить jQuery Mask Plugin?

Шаг 1

Подключаем библиотеку в HTML через CDN сервис. Перед закрывающим тегом </body> добавить

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>

или сжатая версия

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

Шаг 2

Выполняем инициализацию нашей библиотеки

<script>
$(document).ready(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');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.cnpj').mask('00.000.000/0000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
  $('.money2').mask("#.##0,00", {reverse: true});
  $('.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});
  $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
  $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
  $('.fallback').mask("00r00r0000", {
      translation: {
        'r': {
          pattern: /[\/]/,
          fallback: '/'
        },
        placeholder: "__/__/____"
      }
    });
  $('.selectonfocus').mask("00/00/0000", {selectonfocus: true});
});
</script>

Полную документацию по настройке можете прочитать на официальном сайте