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

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

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

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

Задача

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

Решение

Нам поможет плагин 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

Xiper