JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

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

JavaScript

$("input").each(function() {
        var $this = $(this);
        $(this).data("maxlength", $this.prop("maxlength"));
        $(this).removeAttr("maxlength");
    }).bind("input", function() {
        var $this = $(this);
        setTimeout(function() { spill($this, $this.val()); },0);
    });

function spill($this, val) {
    var maxlength = $this.data("maxlength");
    if ( val.length >= maxlength ) {
        $this.val(val.substring(0, maxlength));
        var next = $this.next("input").focus();
        spill(next, val.substring(maxlength));
    }
    else
        $this.val(val);
}