Прежде всего, посмотрите на форму (строки 18, 27). В общем-то, это обычная разметка. Единственное, на что нужно обратить внимание – это id полей ввода. Именно их мы будем использовать при настройке автоматической табуляции. Возвращаемся к заголовку страницы. В строках 7 и 8 мы подключили библиотеку jQuery и плагин. После чего написали небольшую функцию, которая выполняется сразу после загрузки страницы и настраивает плагин. Вся настройка занимает три строки (11-13). Для каждого поля, которое нужно включить в автотабуляцию, вызываем функцию autotab. В параметрах этой функции мы указываем порядок табуляции, допустимое количество символов и тип данных. Например, рассмотрим поле month (строка 12). В параметре target указываем id поля, в которое нужно переместить курсор, после того, как это поле будет заполнено. previous – то же самое, что и target, только работает при очистке поля. format – указывает тип данных. Возможные варианты: text – все кроме цифр, alpha – буквы, numeric, number – цифры, alphanumeric – цифры и буквы, all – любые символы (используется по-умолчанию). maxlength – количество символов в поле. Также можно использовать: uppercase – автоматически преобразует символы в верхний регистр; lowercase – преобразует символы в нижний регистр; nospace – удаляет пробелы (для данного примера устанавливать этот параметр не имеет смысла, т. к. format: ‘numeric’ запрещает ввод пробелов). Таким образом, мы указали, что курсор должен перемещаться из поля day в поле month, а затем – в поле year. А при удалении символов – в обратном порядке. Правда у этого примера есть небольшой недостаток. Если число или месяц состоят из одной цифры, то автоматическая табуляция не сработает. В этом случае нужно либо использовать клавишу «Tab», либо ставить ноль перед цифрой. Как видите, плагином пользоваться несложно и он может значительно упростить ввод дат, телефонных номеров, различных регистрационных кодов. Если есть желание поэкспериментировать, можете скачать архив с этим примером. Удачи!
Понравилась статья? Получай обновления и будь всегда в курсе событий!