ГлавнаяJavaScriptjQuery → jQuery Mask Plugin
jQuery

jQuery Mask Plugin

jQuery Mask Plugin
jQuery
Подпишись на нас в телеграм @coderoll

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>


 

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

Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив