Focus next input once reaching maxlength value

Question

How can I focus the next input once the previous input has reached its maxlength value?

a: <input type="text" maxlength="5" /> b: <input type="text" maxlength="5" /> c: <input type="text" maxlength="5" /> 

If a user pastes text that is greater than the maxlength, ideally it should spill into the next input.

jsFiddle: http://jsfiddle.net/4m5fg/1/

I must stress that I do not want to use a plugin, as I'd much rather learn the logic behind this, than use something that already exists. Thanks for understanding.

Answer 1

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