JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input type="text" maxlength="2" name="test1" class="test"/>
<input type="text" maxlength="2" name="test2" class="test"/>
<input type="text" maxlength="4" name="test3" class="test"/>

JavaScript

$.fn.autotab = function (){
    $(this).on('keyup',function(e){
        switch(e.keyCode){
                // ignore the following keys
            case 9: // tab
                return false;
            case 16: // shift
                return false;
            case 20: // capslock
                return false;
            default: // any other keyup actions will trigger
                var maxlength = $(this).attr('maxlength'); // get maxlength value
                var inputlength = $(this).val().length; // get the length of the text
                if ( inputlength >= maxlength ){ // if the text is equal of more than the max length
                    $(this).next('input[type="text"]').focus(); // set focus to the next text field
                }
        }
    });
};

$('.test').autotab();