JavaScript - Automatic Typing into an HTML Input
In this article, you will see how to fill an input element letter by letter using javascript which looks like someone is typing into that input
Below you can see the demo of it , reload the page or copy the code and run it on your browser to see it in action
HTML
<textarea id="typing"></textarea>JavaScript
Replace text value with the text you want to show and in interval replace 50 with number of milliseconds at which each letter is added to the input
var text = `Call me crazy, when I see you baby
Got a smile about you, something red wine about you
In the evening hazy, in a summer dress you slay me
With one smile you got me, out gen pop acting sloppy
Mad about you
`;
var interval = setInterval(myTimer, 50);
var index = 0;
document.getElementById("typing").focus();
function myTimer() {
if (index == (text.length)) {
clearInterval(interval);
return;
}
document.getElementById("typing").value = document.getElementById("typing").value + text[index];
index++;
}CSS
textarea{
width: 60vh;
height: 60vh;
display: block;
font-family: monospace;
outline: none;
background: none;
color: green;
background-color: black;
border: none;
resize: none;
}ALTERNATE TITLES