Character countdown with Javascript

In this article we will look at how we can add a character countdown functionality to an input field. We will have a maximum number of characters the user can input and when the user starts typing the characters will be counted. The finished code can be accessed on this codepen.

First let’s create the HTML markup.

<div class="container">
<h1 class="text-center mt-4">Character countdown with Javascript</h1>

<form action="#" class="mt-4">
<div class="mb-3">
<label for="post_title" class="form-label">Post title</label>
<input type="text" class="form-control" id="post_title" minlength="5" maxlength="60" value="some value">
<span id="chars">60 characters remaining. Please add a title.</span>
</div>
</form>
</div>

The only important things here are the input field and the span.

On the input field we have a minimum and maximum length limit. And we have an id that we will use in the Javascript to reference this field.

We also have a span with an id. The content here will be changed via Javascript also.

In our Javascript we need to reference a few things:

const POST_TITLE = document.getElementById("post_title");
const MAX_LENGTH = 60;
const CHARS = document.getElementById("chars");

First we create variables and store the input field, the max length of characters a user can type in, and we also grab the span tag by its id.

then we need to create a function that we will use in an eventlistener.

function countCharacters() {
   let enteredChars = POST_TITLE.value.length;
   let charsLeft = MAX_LENGTH - enteredChars;

   if(charsLeft > 35) {
      CHARS.textContent = charsLeft + " characters remaining. Please add more characters for better SEO.";
      CHARS.style.color = "red";
      } else if(charsLeft > 10) {
         CHARS.textContent = charsLeft + " characters remaining. Almost there! Just add a few more characters to have a great SEO title.";
         CHARS.style.color = "orange";
   } else {
      CHARS.textContent = charsLeft + " characters remaining. Awesome! Between 50-60 characters is a great SEO title.";
      CHARS.style.color = "green";
   }

   if(POST_TITLE.value.length == '') {
      CHARS.style.color = "black";
      CHARS.textContent = charsLeft + " characters remaining. Please add a title.";
   }
}

In the function we create two more variables. The first one will check the number of characters the user typed. The second one will give use the number of characters left. It can be easily calculated, we just need to subtract the entered characters from the max length variable.

Here, basically we could finish. The series of conditional statements are just for fun. They will check how many characters are in the input field and according to this number different text will be displayed inside the span tags in different colors.

If we assume that this input field belongs to a blog where you can create blog posts, then from an SEO point of view it’s important how many characters you have in your title, because in search results usually the title or meta title is displayed. Normally it should be between 50-60 characters long.

After this we need to add an eventlistener with a “keyup” event.

POST_TITLE.addEventListener("keyup", countCharacters);

There is one problem left we have to solve. If you use this on a dynamic site and let’s say you want to edit a blog post and the field is populated with text, the characters remaining would show the default state (60 remaining). So to solve this, we need to call the function first. Do it before the eventlistener.

countCharacters();

like this.