Inputmask 3.x — легкий плагин jQuery Mask input формы

jQuery Mask input — это библиотека JavaScript, которая создает маски ввода. Плагин может работать с поддержкой jQuery и jqlite.

Данный инструмент позволяет пользователю с входным данными обеспечеить предопределенный формат. Это может быть полезно для полей даты, цифр, номера телефона и т.д.

Основные характеристики:

  • простота в использовании
  • опционные части в любом месте
  • возможность определения псевдонимов, которые скрывают сложности
  • дата / время маски
  • числовые маски
  • много обратных вызовов
  • многие функции можно включить/отключить/настроить параметры
  • поддержка чтения/валидации
  • поддержка дата-атрибутов
  • регулярное выражение
  • препроцессирование
  • форматирование / проверка без ввода элемента

Использование плагина jQuery mask:

Подключаем файлы библиотеки

<script src="jquery.js"></script>
<script src="inputmask.js"></script>
<script src="inputmask.???.Extensions.js"></script>
<script src="jquery.inputmask.js"></script>

Определяем маски в скриптах:

$(document).ready(function(){
  $(selector).inputmask("99-9999999");  //static mask
  $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});

или используйте HTML-вариант:

<input type="text" data-inputmask="'alias': 'date'" />
<input type="text" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input type="text" data-inputmask="'mask': '99-9999999'" />
$(document).ready(function(){
  $(":input").inputmask();
  //or
  Inputmask().mask(document.querySelectorAll("input"));
});

Любая настройка может также быть передана с помощью дата-атрибутов:

<input id="example1" type="text" data-inputmask-clearmaskonlostfocus="false" />
<input id="example2" type="text" data-inputmask-regex="[a-za-zA-Z0-9!#$%&amp;'*+/=?^_&#96;{|}~-]+(?:\.[a-zA-Z0-9!#$%&amp;'*+/=?^_&#96;{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
$(document).ready(function(){
  $("#example1").inputmask("99-9999999");
  $("#example2").inputmask("Regex");
});
10203 просмотров