Take me back!

How to Make a Fake Typing Effect

In this tutorial, you will learn how to create a 'fake typing effect', where an user can type on the keyboard, but a different output will be displayed. You can see the effect in action on my own project, or on hacker typer.

Of course, we will be using Javascript and HTML to achieve this.

The HTML Input

Normally, to get user keyboard input, an element like <input>. The problem is, <input> actually shows what the user types. Usually, this is good. For us, not good.

So we will instead be using <textarea>, with user input disabled, so <textarea disabled>. Let's also give it an id, maybe "ouput"?

Javascript

This is the bulk of the program.

First of all, we have to detect when the keyboard is pressed. To do this, an event listener will be added to the document.

document.addEventListener("keyup", function(event) {
});

The event we are detecting is called "keyup" and it is emitted whenever a key on the keyboard is released. The second parameter of the addEventListener function is the function that is called when the event is emitted. The event parameter of that function is the emitted event's information.

Now that we can detect key presses, we want the <textarea> element's content to change. Specifically, for every key press, a character from the predetermined text needs to show up. We will have to keep track of the number of keypresses, since the characters have to go in the right order (citation needed).

To keep track of the number, we can use a global variable which we can increment every key press.

Oh, plus we need a variable to store the text we want to display.

So so far we have:

let text = "Lorem ipsum something something blah blah blah...";
let letter = 0;
document.addEventListener("keyup", function(event) {
});

Next, let's add the code that does the actual adding of the text.

let text = "Lorem ipsum something something blah blah blah...";
let letter = 0;
document.addEventListener("keyup", function(event) {
  let output = document.getElementById("output");
  if (letter >= text.length) {
    output.innerHTML = "";
    letter = 0;
  } else {
    output.innerHTML = output.innerHTML+text[letter];
    letter++;
  }
});

Don't worry if you don't understand it, we'll go over it line by line.

In line 1 (of the call back function), the element with id "output" is retrieved and storedd in variable output. This is the <textarea> HTML element we made earlier.

In lines 2-4, the if statement checks if the letter variable (the number char we are currently on) exceeds the length of the text. If so, the output element is cleared, and letter is reset to 0.

Lines 5-8 is only called if the previous if statement on line 2 is false. If this is the case, we append the next letter in the text into the output element, and then increment the letter variable by 1.

That's basically it.

Putting it all together

Here's the code:

<textarea id="output" disabled></textarea>
<script>
  let text = "Lorem ipsum something something blah blah blah...";
  let letter = 0;
  document.addEventListener("keyup", function(event) {
    let output = document.getElementById("output");
    if (letter >= text.length) {
      output.innerHTML = "";
      letter = 0;
    } else {
      output.innerHTML = output.innerHTML+text[letter];
      letter++;
    }
  });
</script>

Be sure to style the <textarea> element with css!