JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<input type="text" value="" id="passField" /><input type="button" value="Gen1" id="gen" />

JavaScript

var symbols = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
    passLength = 8,
    pass = "",
    n = symbols.length - 10,
    inp = document.getElementById("passField");

function placeSymbol(i,k) {
    inp.value = pass + symbols[i];
    
    i < k ? setTimeout(function(){placeSymbol(++i, k)}, 30) : nextLetter();
}

function nextLetter() {
    var k = Math.random() * n >> 0;
    pass = inp.value;
    pass.length < passLength ? placeSymbol(k, k + 10) : 0;
}
document.getElementById("gen").onclick = function () {
    inp.value = "";
    nextLetter();
};