На сегодняшний день практически все web приложения используют html формы. Причем именно работа с ними вызывает наибольший дискомфорт у пользователя.
В этой статье речь пойдет об инструменте, который позволяет значительно ускорить работу с формами. Называется он Autotab и представляет собой плагин к JavaScript библиотеке jQuery.
Основное назначение плагина – ускорить ввод данных в несколько связанных полей. Например, гораздо удобнее вводить дату в три разных поле (отдельно день, месяц, год). Но при этом пользователю придется переключаться между полями.
Autotab позволяет создать группу связанных полей с фиксированной длиной. При этом после заполнения первого поля курсор автоматически переместится в следующее поле. Точно также работает и удаление символов. Можно зажать клавишу «Del» и все связанные поля будут очищены.
Кроме того, плагин осуществляет фильтрацию вводимых данных.
Установка плагина.
Качаем архив. Распаковываем. Подключаем файл jquery.autotab.js в теге script. Не забываем подключить jQuery.
Использование.
Тут лучше всего привести пример.
Тестирование jQuery Autotab
Прежде всего, посмотрите на форму (строки 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», либо ставить ноль перед цифрой.
Как видите, плагином пользоваться несложно и он может значительно упростить ввод дат, телефонных номеров, различных регистрационных кодов.
Если есть желание поэкспериментировать, можете скачать архив с этим примером.
Удачи!
