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

В этой статье речь пойдет об инструменте, который позволяет значительно ускорить работу с формами. Называется он Autotab и представляет собой плагин к JavaScript библиотеке jQuery.

Основное назначение плагина – ускорить ввод данных в несколько связанных полей. Например, гораздо удобнее вводить дату в три разных поле (отдельно день, месяц, год). Но при этом пользователю придется переключаться между полями.

Autotab позволяет создать группу связанных полей с фиксированной длиной. При этом после заполнения первого поля курсор автоматически переместится в следующее поле. Точно также работает и удаление символов. Можно зажать клавишу «Del» и все связанные поля будут очищены.

Кроме того, плагин осуществляет фильтрацию вводимых данных.

Установка плагина.

Качаем архив. Распаковываем. Подключаем файл jquery.autotab.js в теге script. Не забываем подключить jQuery.

Использование.

Тут лучше всего привести пример.

Прежде всего, посмотрите на форму (строки 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», либо ставить ноль перед цифрой.

Как видите, плагином пользоваться несложно и он может значительно упростить ввод дат, телефонных номеров, различных регистрационных кодов.

Если есть желание поэкспериментировать, можете скачать архив с этим примером.

Удачи!