JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="container">
a: <input type="text" maxlength="2" />
b: <input type="text" maxlength="2" />
c: <input type="text" maxlength="4" />
</div>

JavaScript

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement;
    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;
            }
        }
    }
}