Homepage: jQuery Masked Input

Скрипт jquery.maskedinput.js «Masked Input Plugin» написанный на jQuery служит для проверки вводимых данных в форме (form).

Установка: Подключаем библиотеку jQuery и плагин jquery.maskedinput (рекомендую подключать после закрывающего тега body).

Для тега input c id="phone" создаем маску:

$("#phone").mask("+7 (999) 999 - 9999");

Значения для создания маски: a - буквы алфавита (A-Z,a-z) 9 - цифры (0-9) * - буквы и цифры (A-Z,a-z,0-9)

Проверка поля телефона в форме для Тайланда. Код части формы - поле для ввода номера телефона.

<label for="phone">หมายเลขโทรศัพท์ (e.g. = +6638428600):</label>
<input class="form-control input-form " name="phone" id="phone" placeholder="+66" type="tel" required=""
oninput="javascript: if (this.value.length >= this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number" maxlength = "13" minlength="11" >

Загружаем код после закрывающего тега body. Маска запрещает менять первые символы +66 и требует обязательного ввода 10 цифр и плюс, 11 цифра не обязательна для ввода. Форма номера +66XXXXXXX(X).

</body>
 
<script src="js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.mask.definitions['~'] = "[+-]";
        $("#phone").mask("+6699999999?9",{placeholder:" "});
    });
</script>

По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:

$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false});

По умолчанию на место ввода значения ставится знак подчеркивания, для его замены нужно прописать свой placeholder:

$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "});

Плагин также может выполнить функцию после завершения ввода:

$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});

Оригинал статьи Маска ввода в полях формы на jQuery

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

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

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

<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 параметра первый — сама маска для ввода, второй — объект дополнительных параметров. Маска ввода представляет из себя строку состоящую из спец символов:

a — трактуется как буквенный символ из диапазона (A-Z,a-z)
9 — трактуется как числовой символ (0-9)
* — трактуется как алфавитно цифровой символ (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");
});

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