work@lienusowl.ru

Полное портфолио: zsws.ru

Маска ввода для input

Очень простой скрипт, для создания масок ввода в input, для работы нам необходимо подключить библиотеку jQuery, сам скрипт - jquery.maskedinput.js и для вызова работы скрипта будем использовать javascript


Скачать jquery.maskedinput.js
	
	

Вызывается скрипт следующим javascript кодом, в данном примере для инпутов с id - date, phone, tin, ssn - будет подставляться сответственно маска в виде указанном ниже:

	jQuery(function($){
	   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
	   $("#phone").mask("(999) 999-9999");
	   $("#tin").mask("99-9999999");
	   $("#ssn").mask("999-99-9999");
	});

По желанию можно изменить подчеркивания при заполнении на свои значения, задается с помощью - {placeholder:" "}

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

Еще можно указать после завершения ввода текста в input, вывести сообщение к примеру о удачном заполнении поля

	jQuery(function($){
	   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
	});

Можно указывать дополнительные возможные значения которые можно вводить в маске - в примере ниже - чтобы можно было в конкретном месте поставить плюс или минус

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

Маску можно сделать с необязательным заполнением части текста, после '?' считается дополнительным не обязательным текстом

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

Скачать jquery.maskedinput.js