Быстрый и удобный ввод данных в форме с клавиатуры

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>

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-код формы:

<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>

</form>

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

<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>

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-коде:

$(function($){
   $("#date").mask("99.99.9999");
   $("#time").mask("99:99");
   __update();
});

$(function($){

$("#date").mask("99.99.9999");

$("#time").mask("99:99");

__update();

});

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

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

tushov.ru

статьи о веб-разработке на php и wordpress…

Быстрый и удобный ввод данных в форме с клавиатуры

Тушов Леонид

Рубрики

Облако меток

Комментарии

tushov.ru

статьи о веб-разработке на php и wordpress…

Быстрый и удобный ввод данных в форме с клавиатуры

Как собрать (спарсить) видео-ролики с YouTube-канала без использования API за 10 минут?

Организация вывода notice-уведомлений в админке WordPress

Как подключить русифицированный jQuery UI Datepicker в админке WordPress?

Тушов Леонид

Как собрать (спарсить) видео-ролики с YouTube-канала без использования API за 10 минут?

Организация вывода notice-уведомлений в админке WordPress

Как подключить русифицированный jQuery UI Datepicker в админке WordPress?

Рубрики

Облако меток

Комментарии