No jQuery used and is a very clean implementation:

• Reads from the maxlength attribute.


• Scales to any number of inputs inside of your container.


• Automatically finds the next input to focus.


• No jQuery.

http://jsfiddle.net/4m5fg/5/

<div class=container>

a: <input type=text maxlength=5 />

b: <input type=text maxlength=5 />

c: <input type=text maxlength=5 />

</div>

..

var container = document.getElementsByClassName(container)[0];

container.onkeyup = function(e) {

    var target = e.srcElement || e.target;

    var maxLength = parseInt(target.attributes[maxlength].value, 10);

    var myLength = target.value.length;

    if (myLength >= maxLength) {

        var next = target;

        while (next = next.nextElementSibling) {

            if (next == null)

                break;

            if (next.tagName.toLowerCase() === input) {

                next.focus();

                break;

            }

        }

    }

    // Move to previous field if empty (user pressed backspace)

    else if (myLength === 0) {

        var previous = target;

        while (previous = previous.previousElementSibling) {

            if (previous == null)

                break;

            if (previous.tagName.toLowerCase() === input) {

                previous.focus();

                break;

            }

        }

    }

}