Маска ввода в полях формы на 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 параметра:
- — маска для ввода,
- — объект дополнительных параметров.
Маска ввода представляет из себя строку состоящую из спец символов:
- 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");
});Вот вроде бы и все. Используйте плагин в своих работах и вам будет немного проще.
Скачать плагин можно тут.