Jquery.Inputmask

Jquery.Inputmask - крутой (да-да, именно) плагин, добавляющий гибкости в работу с обычным текстовым полем для ввода. Плагин является усовершенствованной версией Masked Input Plugin, полностью совместим с ui-datepicker и поддерживает кучу расширений. Этот плагин - настоящая находка для всех фанатов MaskedTextBox из Winforms.

Введение

Чтобы использовать плагин, нужен jquery и 2 библиотеки самого скрипта:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>
<script src="jquery.inputmask.extensions.js" type="text/javascript"></script>
И на событие document.ready добавляем инициализацию и конфигурацию плагина:
$(document).ready(function(){
   $("#date").inputmask("d/m/y");
});


Конфигурировать плагин можно по-разному: по-простому, используя предопределённые маски(как в примере выше), либо по-своему, используя гибкость настройки плагина:

$("#score").inputmask("99:99", {placeholder:"0", clearMaskOnLostFocus: false});
В этом примере в поле ввода будет отображаться маска "00:00" для ввода счета игры.

Стандартный функционал

Для маскирования ввода используются предопределённые символы:
9 - любая цифра в диапазоне [0-9]
a - любая буква [a-zA-Z] + юникод диапазон [\u0410-\u044F\u0401\u0451]
* - объединение дву вышеперечисленных диапазонов
Например, маска для ввода серии и номер паспорта:
$("#passport").inputmask({"mask": "aa999999"});

Плагин позволяет отслеживать события oncomplete, onincomplete, onKeyUp, onKeyDown, oncleared. Например:
$("#passport").inputmask({"mask": "aa999999", 

                          onincomplete: function(){

                             alert("Пожалуйста, укажите номер паспорта."); 

                             setTimeout(function() { 

                                $('#passport').focus(); 

                             },50);

                           }

                          });

Кроме того, есть еще куча полезных настроек, о которых подробно написано в readme. Очень удобной штукой являются алиасы (alias), позволяющие создавать свои собственные маски:

$.extend($.inputmask.defaults.aliases, {
        'passport': {
            mask: "aa999999", placeholder: "EE000000", clearMaskOnLostFocus: false
        },
        'aa999999': {
        alias: "passport"
    }
});
И затем в документе можно просто написать так:
$("#passport").inputmask("passport");

Расширения

На githab'e лежат два очень полезных расширения: для работы с датами  и временем (jquery.inputmask.date.extensions.js) и для работы с числами ( jquery.inputmask.numeric.extensions.js).

Для работы с числами определены алиасы decimal, non-negative-decimal и integer. Можно настроить всё, что хочется: символ радикса (radixPoint), количество знаков после радикса (digits) и группировку (autoGroup, groupSeparator, groupSize):  
$("#salary").inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: "'", groupSize: 3 });
Для работы с датами и временем определены константы h (часы), s (минуты/секунды), d (дни), m (минуты), y (года) и готовые алиасы dd/mm/yyyy (и все возможные вариации на тему: mm/dd/yyyy, yyyy/mm/dd, dd.mm.yyyy, dd-mm-yyyy, mm.dd.yyyy и т.д.), hh:mm:ss, hh:mm, date (синоним dd/mm/yyyy) и datetime (дата и время).
Кроме этого уже огромного набора в jquery.inputmask.custom.extensions.js определены маски для работы со временем в AM/PM формате ('h:s t') и для работы с различными типами URL (url).

Вместо заключения

Плагин здорово облегчает жизнь при работе с формами. Кроме гибкости, поддежрки большого количества форматов ввода и лёгкой расширяемости, плагин радует простотой и продуманостью.