JSFiddle - React, Tailwind, and code Playground

by Puddster

HTML

<input type="text" id="txtInput" text="" />

JavaScript

$(document).ready(function() {
    typeIt(-1);
});

function typeIt(stringIndex) {
    var strings = [
        "Hello world!",
        "How are you?",
        "Another string",
        "Here is a longer string",
        "123456",
        "And one last string!"
    ],
        theString = "",
        theDelay = Math.floor(Math.random() * 400) + 100;
    
    if (stringIndex === -1) {
        stringIndex = Math.random() * strings.length;
        stringIndex = Math.floor(stringIndex);
        $("#txtInput").val("");
    }
    
    theString  = strings[stringIndex];
    
    if ( $("#txtInput").val().length === theString.length ) {
        setTimeout(function() {typeIt(-1);}, theDelay * 10);
    } else {
        $("#txtInput").val( theString.substring(0, $("#txtInput").val().length + 1) );
        setTimeout(function() {typeIt(stringIndex);}, theDelay);
    }
}