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

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

Задача

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

Решение

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

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

Проверено в:

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

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.plugins.js — собственно плагин

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

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

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

});

Плюсы:

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

Минус:

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

По теме

• Плагин Masked Input

Материал

• jquery plugin :: jQuery Group Inputs