Группируем инпуты

Автор: Александр Головко Дата публикации: 28.01.2013

группа инпутов

Иногда бывает, что нужно заставить несколько текстовых полей вести себя как одно целое. Например, это удобно при вводе номера кредитной карты.

Задача

Сделать удобный для пользователя ввод чисел в группу объединенных по смыслу полей, включая автоматический переход курсора на следующее поле и разбивку по полям при вставке значения из буфера обмена.

Решение

Нам поможет плагин jQuery Group Inputs.

Смотрим демо-пример.

Проверено в:

  • IE 7+
  • Firefox
  • Opera
  • Chrome
  • Safari

Что качать?

Быстрый старт

Подключаем библиотеки:

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

Создаем HTML формы. Всем инпутам прописываем общий класс (для вызова плагина). Так как подразумевается ввод номера кредитной карточки, устанавливаем autocomplete="off"

<form action="#" method="post">
	<input type="text" value="" id="Number1" autocomplete="off" maxlength="4" class="NumGroup">
	<input type="text" value="" id="Number2" autocomplete="off" maxlength="4" class="NumGroup">
	<input type="text" value="" id="Number3" autocomplete="off" maxlength="4" class="NumGroup">
	<input type="text" value="" id="Number4" autocomplete="off" maxlength="4" class="NumGroup">
</form>

Последний шаг — инициализируем плагин:

<script type="text/javascript">
	$(function()
	{
		$('.NumGroup').groupinputs();
	});
</script>

Ввод только цифр

Для запрета ввоба любых символов, кроме цифр можно воспользоваться плагином jCaret (отдельно качать не нужно — он есть внутри jquery.plugins.js).

Тогда инициализация будет выглядеть так:

$(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);
    }
});

});

Плюсы:

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

Минус:

  • Несколько неудобно реализовано редактирование текста вручную.

По теме

Материал