Совсем недавно, понадобилось быстренько разработать небольшое некоммерческое веб-приложение по части сбора статистики по данным артериального давления и пульса с графиками и прочим. Так как необходимо было вбивать большое количество данных (более 300 штук наборов параметров времени, АД и пульса), то пришлось подумать над созданием удобной формой для быстрого ввода.

Основные требования были такие:

  • Форматирование даты по маске dd.mm.YYYY
  • Форматирование времени по маске HH:ii
  • При заполнении очередного поля фокус ввода должен был автоматически переходить к следующему полю на форме
  • После нажатия кнопки отправки формы, все поля кроме одного (даты) очищаются, а фокус ввода переходит к полю ввода/выбора даты

Итак, начнем с подключения двух необходимых скриптов:

С JQuery всё понятно — без комментариев. А вот jquery.maskedinput.min.js я использовал для форматирования данных в полях ввода даты и времени по маскам.  Ниже будет код использования данного скрипта.

HTML-код формы:

и конечно же JavaScript-код:

Краткое описание функций:

  • __add — добавление данных, у меня используется AJAX-запрос для вставки данных в БД, естественно вам он не нужен будет в таком же виде )
  • __update — обновление списка данных ниже формы, опять же привожу просто как пример, который в таком виде работать не будет.
  • testJump — та самая функция обеспечивающая переход из поля, которое было заполнено до максимальной длины символов к следующему полю для заполнения.  Максимальная длина данных в поле задается через значение HTML-атрибута maxlength.

В javascript-коде:

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

Все вопросы, как обычно,  в комментариях!