jQuery Group Inputs

Easy data input into several inputs.

Inputs begin to behave as if they share data:

When one input is filled out the cursor moves to the next
Left/right arrows move cursor to the previous/next input
Pasting the text will fill out several inputs and cursor will be left in the end of the pasted text as if it was a single input field.

Example

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

Recommendation for numbers fields

Leave only the digits

keydown and keypress events don't need to add preventDefault in order to keep user defined shortcuts. It’s necessary to clean the box after you enter the symbols as follows:

$('.group1').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);
    }
});

The example uses a plugin jCaret.

Show keypad in iOS

Add an attribute pattern="[0-9]*".

<input type="text" maxlength="4" class="group1" name="" pattern="[0-9]*">

Limitations