Совсем недавно, понадобилось быстренько разработать небольшое некоммерческое веб-приложение по части сбора статистики по данным артериального давления и пульса с графиками и прочим. Так как необходимо было вбивать большое количество данных (более 300 штук наборов параметров времени, АД и пульса), то пришлось подумать над созданием удобной формой для быстрого ввода.
Основные требования были такие:
- Форматирование даты по маске dd.mm.YYYY
- Форматирование времени по маске HH:ii
- При заполнении очередного поля фокус ввода должен был автоматически переходить к следующему полю на форме
- После нажатия кнопки отправки формы, все поля кроме одного (даты) очищаются, а фокус ввода переходит к полю ввода/выбора даты
Итак, начнем с подключения двух необходимых скриптов:
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.maskedinput.min.js"></script> |
С JQuery всё понятно — без комментариев. А вот jquery.maskedinput.min.js я использовал для форматирования данных в полях ввода даты и времени по маскам. Ниже будет код использования данного скрипта.
HTML-код формы:
1 2 3 4 5 6 7 8 |
<form id="add_form" class="form-inline" role="form" onsubmit="return __add();"> <input id="date" onkeyup="testJump(this);" type="text" class="form-control" style="width:110px;" name="date" placeholder="" maxlength="10" /> <input id="time" onkeyup="testJump(this);" type="text" class="form-control" style="width:110px;" name="time" placeholder="Время (H:i)" maxlength="5" /> <input id="top" onkeyup="testJump(this);" type="text" class="form-control" style="width:90px;" name="top" placeholder="Верхнее" maxlength="3" /> <input id="bottom" onkeyup="testJump(this);" type="text" class="form-control" style="width:90px;" name="bottom" placeholder="Нижнее" maxlength="3" /> <input id="pulse" onkeyup="testJump(this);" type="text" class="form-control" style="width:70px;" name="pulse" placeholder="Пульс" maxlength="3" /> <input type="submit" class="btn btn-primary" valu="Добавить" /> </form> |
и конечно же JavaScript-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<script> function __add() { $.ajax({ type: 'POST', url: 'ajax.php?task=add', data: $('#add_form').serialize(), beforeSend: function( xhr ) { $("*").css("cursor", "wait"); } }).done(function(data) { if (data.error) { alert(data.error); } else { $('#time').val(''); $('#top').val(''); $('#bottom').val(''); $('#pulse').val(''); $('#date').focus(); __update(); } }); return false; } function __update() { $.ajax({ type: 'GET', url: 'ajax.php?task=list', }).done(function(data) { $('#results').html(data); $("*").css("cursor", "auto"); }); } function testJump(x){ var ml = ~~x.getAttribute('maxlength'); var val = x.value; val = val.replace(/[^.:0-9]/gim,''); if(ml && val.length >= ml){ do{ x = x.nextSibling; } while(x && !(/text/.test(x.type))); if(x && /text/.test(x.type)){ x.focus(); } } } $(function($){ $("#date").mask("99.99.9999"); $("#time").mask("99:99"); __update(); }); </script> |
Краткое описание функций:
- __add — добавление данных, у меня используется AJAX-запрос для вставки данных в БД, естественно вам он не нужен будет в таком же виде )
- __update — обновление списка данных ниже формы, опять же привожу просто как пример, который в таком виде работать не будет.
- testJump — та самая функция обеспечивающая переход из поля, которое было заполнено до максимальной длины символов к следующему полю для заполнения. Максимальная длина данных в поле задается через значение HTML-атрибута maxlength.
В javascript-коде:
1 2 3 4 5 |
$(function($){ $("#date").mask("99.99.9999"); $("#time").mask("99:99"); __update(); }); |
происходит установка маски ввода для полей ввода даты и времени, а также вызов функции обновления данных в таблице ниже формы.
Все вопросы, как обычно, в комментариях!
Комментарии
Разиль
"Мне нужна помощь я не знаю как загрузить фото в сеть что бы ..."
Тушов Леонид
"Если для кого-нибудь еще актуально, то мой новый курс обучения веб-программированию на PHP ..."
Вера
"Для того, чтобы воспользоваться возможностями плагинов jQuery UI их необходимо вначале подключить к ..."
Тушов Леонид
"Здравствуйте. Можете поискать на просторах интернета когда-то компонент JoomlaGrabber, но там нужно будет ..."
Павел
"Здравствуйте! Срочно нужно преобразовать RSS ленту типа https://yandex.ru/blogs?text=&lr=213&author=tema в контент сайта на joomla ..."