Ввод по маске. jQuery.

Вольный перевод документации к отличнейшему плагину для jQuery:

Masked Input Plugin

Masked Input Plugin — плагин для jQuery, он позволяет фильтровать пользовательский ввод в HTML INPUT элементах. Плагин делает это на лету, т.е. пользователю не удасться ошибиться, если вы правильно подберете маску. Плагин протестирован почти на всех совсременных браузерах и даже работает под Андроидами. Что обычно фильтруют:

• Даты
• Телефоны
• Время

и много другого

Если брать по простому, то маска задается так:

• a — буквы
• 9 — цифры
• * — буквы и цифры

Подключение плагина крайне простое:

<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");
});

Не введенные символы указаны знаком подчеркивания, если это вас бесит, то укажите пробел вот так:

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

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

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");
});

Если в маске должен быть свой набор символов (например для времени или для шестнадцатиричных кодов) то DevelStudioсможете легко создать свой собственный набор сиволов как $.mask.definitions[‘h’] = "[A-Fa-f0-9]";

А затем использовать этот набор в выражении, вот так:

jQuery(function($){
   $("#phone").mask("#hhhhhh");
});

Вот такая крайне простая и удобная штуковина под названием Masked Input Plugin.