В статье описываются особенности установки и использование специального плагина, который группирует определенное количество инпутов в одну структурную единицу.

Большинство коммерческих проектов, которые реализованы в электронном пространстве, сопровождаются большим количеством форм обратной связи и регистрационными анкетами. Для некоторых случав возникает потребность группировать несколько полей в одну сложную структурную единицу для заполнения информацией. К примеру, это может быть банковский счет, который состоит из четырех цифр. Также такой принцип используется при вводе ключа активации какой-либо программы.

Весьма ценной возможностью для таких полей станет возможность курсора перескакивать в следующую ячейку после заполнения предыдущей. Также для таких полей важно наличие способности разбивать информацию на соответствующие группы из буфера обмена. Для решения поставленных задач наиболее подойдет плагин jQuery Group Inputs.

Установка

Как обычно, установка любого JavaScript-плагина начинается с поиска нужных библиотек и выкачивания непосредствено самого дополнения. В данном случае нас должно интересовать:

• библиотека jquery;

j

• плагин для группировки полей - jquery.plugins.js.

После того, как инструмент объединения полей скачен и помещен в нужное место, подключаем его программно. Библиотеку jquery можно легко подключить из хранилища Google, ну а сам плагин подключается по старинке

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="GroupInputs/jquery.plugins.js"></script>

Следующим шагом будет создание скелета для формирования нашего функционала. Для ввода ключа активации можно создать 4 поля, в которые вводится по 4 цифры — этот параметр устанавливается через максимально возможную длину текста в поле посредством атрибута maxlength. Ввод кода активации должен быть защищен от автоввода. Связь между плагином и полями осуществляется через общий класс, который будет вписан в код инициализации чуть позже

HTML

<p>Введите ключ активации</p>
<form action="#" method="post">
	<input type="text" id="field1" autocomplete="off" maxlength="4" class="number">
	<input type="text" id="field2" autocomplete="off" maxlength="4" class="number">
	<input type="text" id="field3" autocomplete="off" maxlength="4" class="number">
	<input type="text" id="field4" autocomplete="off" maxlength="4" class="number">
</form>

После записи этого кода переходим к процедуре инициализации, которая запускает работу плагина

JavaScript

$(function()
	{
		$('.number').groupinputs();
	});

В завершение хочу показать, как выглядит правильный способ реализации представленной установки в браузере. Если все сделано правильно, то при заполнении одного поля курсор должен будет автоматически перескакивать в следующее поле

Цифровые поля

В некоторых случаях необходимо ограничить вводимые значения только цифровым форматом. Для этого не нужно выдумывать велосипед и создавать уникальный скрипт или php-код. Существующая библиотека в своем составе уже имеет необходимые команды, их только надо включить в код инициализации. Таким образом, запуск цифрового формата ввода данных осуществляется таким способом

JavaScript

$(function(){
 
$('.NumGroup').groupinputs();
 
$('.NumGroup').on('input propertychange', function(e) {
    var elem = $(e.target),
        value = elem.val(),
        caret = elem.caret(),
        newValue = value.replace(/[^0-9]/g, ''),
        valueDiff = value.length - newValue.length;
 
    if (valueDiff) {
        elem
            .val(newValue)
            .caret(caret.start - valueDiff, caret.end - valueDiff);
    }
});
 
});

Подводя итог

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

Из всех возможностей плагина следует выделить такие положительные стороны, как

• автоматический переход курсора после заполнения текущего поля;
• перемещение курсора позволяется осуществлять кнопками клавиатуры (чаще всего это стрелки);
• разбивает информацию из буфера обмена на группы для вставки в поля.

Из недостатков можно упомянуть только сложности внесения правок текста в ручном режиме.

В целом плагин может решать ряд конкретных задач и имеет право на существование и внимание веб-разработчиков.