post.jpg

jQuery-Mask-Plugin - примеры использования

Плагин JQuery-Mask-Plugin предназначен для установления маски ввода элементу input с помощью кода JavaScript.

Весьма прост в установке и настройке. Работа плагина заключается в том, чтобы форматировать вводимые пользователем в полях ввода данные и приводить их к виду, заданному соответствующей маской в коде. Кроме этого, плагин JQuery-Mask-Plugin производит фильтрацию данных и не позволяет пользователю вводить недопустимое количество данных и данных другого формата.

Подключение плагина - как обычно, - после библиотеки JQuery в конце страницы, перед закрытием тега '< body>'



<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.mask.min.js"></script>

Инициализация.

Инициализировать плагин можно как при помощи data-атрибутов поля input, так и вызовом функции $.mask() с различными опциями.  

Вот пример применения плагина для задания маски через data-атрибуты:


<form>
 <div class="form-row">
  <div class="col">
   <label for="formGroupExampleInput">Дата</label>
    <input type="text" class="form-control"  id="formGroupExampleInput"  name="field-name"  data-mask="00/00/0000" />
  </div>
  <div class="col">
   <label for="formGroupExampleInput2">Телефон</label>
     <input type="text" class="form-control" id="formGroupExampleInput2" data-mask="+7 (000) 000 00 00" placeholder="+7 (___) ___ __ __">
  </div>
 </div>
</form>

Результат до заполнения полей:

и после :

Для инициализации через JQuery создаем какой-нибудь .js-файл, который подключаем также в конце страницы после файла плагина (например custom.js):


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.mask.min.js"></script>
<script src="js/jquery.custom.js"></script>

Содержимое custom.js для реализации вышеуказанного примера с data-mask:


jQuery(document).ready(function(){

	$('.date').mask('00/00/0000');
	$('.phone').mask('+0 (000) 000 00 00', {placeholder: "+_ (___) ___ __ __"});
	

});

В разметке html , конечно же, должны присутствовать соответствующие селекторы:


<form>
 <div class="form-row">
  <div class="col">
   <label for="formGroupExampleInput">Дата</label>
   <input type="text" class="form-control date"  id="formGroupExampleInput" />
  </div>
  <div class="col">
   <label for="formGroupExampleInput2">Телефон</label>
   <input type="text" class="form-control phone" id="formGroupExampleInput2" />
  </div>
 </div>
</form>

Результат должен получиться тот же самый.

Вот примеры базового использования плагина:


$(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});
});

 

Поделиться
JQuery-Mask-Plugin предназначен для установления маски ввода элементу input с помощью кода JavaScript.

Весьма прост в установке и настройке. Работа плагина заключается в том, чтобы форматировать вводимые пользователем в полях ввода данные и приводить их к виду, заданному соответствующей маской в коде. Кроме этого, плагин JQuery-Mask-Plugin производит фильтрацию данных и не позволяет пользователю вводить недопустимое количество данных и данных другого формата.

" data-limit="3" data-counter>

КОММЕНТАРИИ (0)