How to make a group of input convenient

When I was working on the note service jotsky.com, even before working at Ostrovka , I had to enter a phone number from two inputs. Something like this:



I did the navigation using arrows. I made the focus switch to the next input as you fill it. But I could not do the correct insertion from the clipboard.

Insertion from the buffer can be implemented by setting the maxlength attribute with a margin. For a city code, its value should be at least the length of the telephone number, that is, not three, but ten.
')
The problem was not even to insert more numbers between the numbers. And the fact that if you hold down the button from the keyboard and do not squeeze, the behavior turned out to be very strange: at first, one input is filled for the whole maxlength , then the user presses the key and gets flickering due to the fact that the numbers are distributed along the rest of the input.

By the way, it was 2008, and the only opportunity I saw was to program everything through setTimeout . Anticipating the development time and unsatisfactory results, we merged this form into one, which has survived to the present day without any changes.

Years have passed. Browsers implemented the oninput event. The community has onpropertychange event in IE. And in front of me, already in Ostrovka, there was a task to realize the insertion of a credit card number from the clipboard and at the same time for the field of its validity.



It was a sign to solve the problem as a whole. With accumulated experience and a dozen unit tests, I managed to find the combination of other events in which filling the fields would be the most natural for the user.

Meet the jQuery Group Inputs - a plugin for grouping inputs.

Inputa start to behave as if they have common data:
- When the place ends, the carriage moves on.
- Left / right buttons move the carriage to the next / previous input
- Insert text scatters the text on the input, after inserting the cursor rises as if it were one input.

Example of use:

 <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> 

Repository on github .
Demo .

Posted by: lusever