DEV Community

nancy
nancy

Posted on

How to Create an Auto-typing Feature in JavaScript

In some cases, a developer may want to animate text content for users to see when they visit the web page. This can be achieved through auto-typing. This feature helps to enhance the look of a site and improves the overall user experience.

Auto typing can be used to make eye-catching adverts or auto-complete text when a user is typing. It can be regarded as animation and helps to retain attention, as well as simplify complex information. This is indeed a useful feature to implement in a frontend web project.

Prerequisites

To follow along with this tutorial, you need to have:

  • A basic understanding of JavaScript.
  • An understanding of HTML and Bootstrap.

Goal

In this article, we will implement the auto typing feature using JavaScript and jQuery, as shown in the video below.

Image description

Getting started

We will use jQuery and Immediately Invoked Function Expressions due to their simplicity.

The general syntax of an IIFE is shown below:

(function () {
  statements;

})();
Enter fullscreen mode Exit fullscreen mode

In the above example, the grouping operator prevents variables within the IIFE from being accessed from the global scope.

You can learn more about IIFEs from the official documentation here.

Note that we will put all of our code in a single file.

Creating JavaScript functions

Create a new folder on your computer and give it any name. In this directory, generate a new file and name it as index.html.

We need to add the following JavaScript code in the index.html file. I have explained the code snippets using inline comments:

//The function for auto-typing
function autoType(elementClass, typingSpeed, timeout) {
//The target class where the auto-typing will be invoked
    var ourClass = $(auto-typing);
    //setting the CSS styling for the target class
    ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });
    //looking for `text-js` containing the text that will be typed out
    ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');
    //storing the length of text
    var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";

    setTimeout(function () {
    //changing the text visibility to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed in a for-loop
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char;
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);
  }

function fire(){
//calling the functions with respective arguments (text field, typing speed, and timeout)
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}
Enter fullscreen mode Exit fullscreen mode

Let's understand further what the above JavaScript code entails:

The autoType() function requires three parameters:

  • elementClass - The target class where the auto-typing will be invoked.
  • typingSpeed - This is the typing speed.
  • timeout - The waiting period before the autoTyping() function is fired.

ourClass variable stores the target class, as demonstrated below:

 ourClass = ourClass.find(".text-js");
Enter fullscreen mode Exit fullscreen mode

We add styling to the elements using the following code:

  ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });
Enter fullscreen mode Exit fullscreen mode

Next, we look for text-js. This is a class found in our target class. It contains the text that will be typed out. Thereafter, we remove any trailing spaces. This is demonstrated below:

ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');
Enter fullscreen mode Exit fullscreen mode

The amntOfChars variable will contain the length of our text. We will then store the text to display inside the newString variable.

var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";
Enter fullscreen mode Exit fullscreen mode

In the setTimeout() function, we set the opacity of the target class's contents from 0 to 1 to make it visible. We also clear the text of the target class.

In the for loop, the IIFE takes the index and the text character at a particular index as parameters. It then calculates the timeout by multiplying the index number by the typing speed.

The newString is concatenated with the text character at the provided index until the for loop ends.

 setTimeout(function () {
    //changing the text visibility to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed in a for-loop
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char; //concatenation
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);
Enter fullscreen mode Exit fullscreen mode

Finally, we call the auto-typing() function inside the fire method. This is shown below:

function fire(){
//calling the functions with respective arguments (text field, typing speed, and timeout)
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}
Enter fullscreen mode Exit fullscreen mode

The HTML and CSS part

We will use the following HTML code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Auto typing</title>
    <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>
  </head>
  <body onload="fire()" style="background-color: white">
<section style="margin-top: 10vh; padding-left: 15vw" class="pb-5">
    <div class="container pb-md-3">
        <div class="text-center">
            <div class="row">
              <div class="col-md-5" style="text-align: left">
                <h3 class="mb-4 title" style="color: red">Q & A&nbsp;</h3>
                <div class="type-js"><div class="text-js">
                  Is this Dev.to?
                </div>
                </div>
                <br>
                <div class="type-js-ii"><div class="text-js">
                  Yes, why?
                </div>
                </div><br>
                <div class="type-js-iii"><div class="text-js">Tell me more about the community.
                </div>
                </div><br>
                <div class="type-js-iv"><div class="text-js">It is, I mean, it is that--
                </div>
                </div><br>
                <div class="type-js-v"><div class="text-js">Could you please talk faster?
                </div>
                </div>
              </div>
        </div>
    </div>
</section>

</body>
Enter fullscreen mode Exit fullscreen mode

In the <head> section, we set the text color to black, font to Lucida sans, and the text height to auto.

 <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>
Enter fullscreen mode Exit fullscreen mode

In the <body> tag, we call the fire() function when it loads.

<body onload="fire()" style="background-color: white">
Enter fullscreen mode Exit fullscreen mode

Bootstrap 5 is used for styling. The documentation can be found here.

In the code above, we have imported Bootstrap using the code below:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Enter fullscreen mode Exit fullscreen mode

Remember to import the jQuery or the auto-typing feature will not work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

The full code

After completing the above steps, we can save our file and then view it in the browser. Your final code should look as shown below:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Auto typing</title>
    <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>
  </head>
  <body onload="fire()" style="background-color: white">
<section style="margin-top: 10vh; padding-left: 15vw" class="pb-5">
    <div class="container pb-md-3">
        <div class="text-center">
            <div class="row">
              <div class="col-md-5" style="text-align: left">
                <h3 class="mb-4 title" style="color: red">Q & A&nbsp;</h3>
                <div class="type-js"><div class="text-js">
                  Is this Dev.to?
                </div>
                </div>
                <br>
                <div class="type-js-ii"><div class="text-js">
                  Yes, why?
                </div>
                </div><br>
                <div class="type-js-iii"><div class="text-js">Tell me more about the community.
                </div>
                </div><br>
                <div class="type-js-iv"><div class="text-js">It is, I mean, it is that--
                </div>
                </div><br>
                <div class="type-js-v"><div class="text-js">Could you please talk faster?
                </div>
                </div>
              </div>
        </div>
    </div>
</section>

</body>

<script>
//The function for auto-typing
function autoType(elementClass, typingSpeed, timeout) {
//The target class where the auto-typing will be invoked
    var ourClass = $(elementClass);
    //setting the CSS styling for the target class
    ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });
    //looking for `text-js` containing the text that will be typed out
    ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');
    //storing the length of text
    var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";

    setTimeout(function () {
    //changing the text visibilty to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char;
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);
  }

function fire(){
//calling the functions with respective arguments
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

This tutorial has shown you how to create an auto typing feature using JavaScript and jQuery. We have analyzed the JavaScript code and determined how it works. I hope you gained some insights that you'll apply in your next project.

Happy coding!

Top comments (0)

Read next

hugovk profile image

A surprising thing about PyPI's BigQuery data

Hugo van Kemenade -

dazevedo profile image

RabbitMQ: Using It with Microservices

Daniel Azevedo -

ian_ndeda profile image

Self-Aligning Dish: GPS

Ian Ndeda -

skemuel007 profile image

Day 1 - GenAI with Langchain Tutorial (Environment Setup)

Stanley-Kemuel Lloyd Salvation -