jQuery Mask Plugin - форматирование ввода данных

Что такое jQuery Mask Plugin?

jQuery Mask Plugin – это мощный инструмент, предназначенный для форматирования и валидации ввода данных на веб-страницах. Он базируется на библиотеке jQuery и предоставляет разработчикам простой и эффективный способ контроля над форматом ввода пользовательских данных.

Основные возможности:

1. Автоматическое форматирование ввода данных: jQuery Mask Plugin позволяет легко добавлять маски для телефонных номеров, дат, времени и других форматов.
2. Возможность задания пользовательских масок: Разработчики могут легко создавать свои собственные маски в соответствии с требованиями конкретного проекта.
3. Валидация ввода: Интегрированная функциональность валидации помогает предотвращать ошибки и улучшает качество данных, вводимых пользователями.

Преимущества использования jQuery Mask Plugin:

• Улучшенный пользовательский опыт: Маски облегчают ввод данных, делая его более интуитивным и понятным для пользователей.
• Экономия времени разработчика: Благодаря простому синтаксису и гибким настройкам, использование плагина существенно сокращает время на разработку форм и их валидацию.
• Совместимость с различными браузерами: jQuery Mask Plugin обеспечивает стабильную работу на различных платформах и браузерах.

Как настроить 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>

jQuery Mask Plugin – это незаменимый инструмент для веб-разработчиков, стремящихся улучшить пользовательский опыт и сэкономить время на разработке форм. Интегрируйте этот плагин в ваши проекты, и вы увидите, как легко можно достичь точного и красивого форматирования ввода данных.

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