Наверх

Создание и поддержка сайтов любой сложности
Разработка мобильных приложений для iOS и Android

8 (924) 179-08-45

Маска ввода в полях формы на jQuery

Маска ввода в полях формы на jQuery

Дата создания: 03/05/2016

Masked input — плагин предназначенный для  javascript фремворка jQuery. Он позволяет установить строгий формат ввода (маску ввода) в текстовые поля формы для ввода времени, даты, телефона и т.п.

Плагин корректно работает во всех браузерах начиная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.

Первым делом подключаем сам фреймворк и плагин внутри тега head вашей страницы:

 

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

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

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Функция плагина принимает 2 параметра:

  1.  — маска для ввода,
  2.  — объект дополнительных параметров.

Маска ввода представляет из себя строку состоящую из спец символов:

  1. a — трактуется как буквенный символ из диапазона (A-Z,a-z)
  2. 9 — трактуется как числовой символ (0-9)
  3. * — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)

Все символы кроме перечисленных выше трактуются как литералы. В объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, например если вы хотите чтобы было не нижнее подчеркивание, а пробел, тогда ваша функция будет выглядеть так:

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Можно так же указать функцию обратного вызова в качестве дополнительного параметра. Она будет вызвана после того как все элементы маски будут заполнены:

jQuery(function($){
   $("#product").mask("99/99/9999",{completed : function(){
       alert("Вы ввели: "+this.val());}
   });
});

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

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Иногда бывают такие ситуации, что возникает потребность не заполнять пользователем некоторую часть маски ввода, для этого вы можете использовать спецсимвол ? — все что идет после этого символа является не обязательным для ввода с стороны пользователя, например:

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

Вот вроде бы и все. Используйте плагин в своих работах и вам будет немного проще.

Скачать плагин можно тут.

 

678960, Нерюнгри, РС(Я)
ул. Лужников 3/2, офис 206

© Студия веб-дизайна "TimDan"
Все права защищены! 2013 - 2018 г.

8 (924) 179-08-45