Когда я работал над сервисом заметок 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>
Автор: lusever
Автор: Ostrovok
