Switch branches/tags
Nothing to show
Pull request Compare This branch is 14 commits behind lusever:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
README.md
jquery.groupinputs.js

README.md

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

Does not work in iOS (method input.focus() does not work).