Как сделать группу инпутов удобной

Когда я работал над сервисом заметок jotsky.com, еще до работы в Островке, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:



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

Вставку из буфера можно реализовать установив атрибут maxlength с запасом. Для кода города его значение должно быть минимум длины телефонного номера, то есть не три, а десять.

Проблема была даже не в том, чтобы между цифрами вставить еще цифры. А в том, что если зажать кнопку с клавиатуры и не отжимать, то поведение получалось очень странным: вначале заполняется один инпут на весь maxlength, потом пользователь отжимает клавишу и получает мерцание из-за того, что цифры распределяются по остальным инпутам.

К слову, это был 2008 год, и единственная возможность, которую я видел, было спрограммировать все через setTimeout. Предвидя время разработки и неудовлетворительный результат, мы объединили эту форму в одну, которая дожила без изменений до наших дней.

Прошли годы. Браузеры реализовали событие oninput. Сообщество популизировало событие onpropertychange в IE. А передо мной, уже в Островке, встала задача реализовать вставку из буфера обмена номера кредитной карты и заодно для поля срока ее действия.



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

Встречайте jQuery Group Inputs — плагин для группировки инпутов.

Инпуты начинают вести себя будто у них общие данные:
— Когда место заканчивается, каретка перемещается дальше
— Кнопки вправо/влево перебрасывают каретку в следующий/предыдущий инпут
— Вставка текста разбрасывает текст по инпутам, после вставки курсор встает так, как-будто это один инпут.

Пример использования:

<script src="jquery-1.7.2.js"></script>
<script src="jquery.groupinputs.js"></script>
<input type="text" maxlength="4" class="group1" name="">
<input type="text" maxlength="4" class="group1" name="">
<input type="text" maxlength="4" class="group1" name="">
<input type="text" maxlength="4" class="group1" name="">
<script>
     $('.group1').groupinputs();
</script>

Репозиторий на GitHub.
Демо.

Автор: lusever