JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<script language="javascript" type="text/javascript">
    function randomString() {
        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        var string_length = 4;
        var randomstring = '';
        for (var i = 0; i < string_length; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum, rnum + 1);
        }
        document.randform.randomfield.value = randomstring;
    }
</script>
<form name="randform" method="send">
    <input type="text" onchange="randomString();" />&nbsp;
    <input type="button" class="button" value="Create Random String" />
    <input class="values" type="hidden" name="randomfield" />
    
    <input type="text" maxlength="1" class="small" />
    <input type="text" disabled="disabled" maxlength="1" class="small" />
    <input type="text" disabled="disabled" maxlength="1" class="small" />
    <input type="text" disabled="disabled" maxlength="1" class="small" />
    <input type="button" class="check" value="check"/>
</form>

CSS

.small {
    width:14px;
    text-align:center;
}

JavaScript

$(".small").on('keyup', function (e) {
    if (e.keyCode == 8) { /* backspace is 8 */
        $(this).prev('.small').focus();
    } else {
        $(this).next('.small').removeAttr("disabled").focus();
    }
});