Simple Textarea Remaining Characters Counter (Free Download)

Welcome to a tutorial on how to create a text area with a remaining character counter in Javascript. Limiting the number of characters in a text field is as easy as setting the maxlength. But how do we add a “countdown” to it? Read on for a very simple example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

REMAINING CHARACTERS DEMO

 

 

 

PART 1) THE HTML

<div class="char-remain">
  <!-- (A) USUAL TEXT AREA -->
  <textarea maxlength="160" class="char-remain-txt"></textarea>
 
  <!-- (B) REMAINING COUNTER -->
  <div class="char-remain-count"></div>
</div>

• Look no further, this is just the “usual” <textarea maxlength="N">.
• We only added a <div class="char-remain-count"> below to serve as the counter.
• Lastly, wrap everything in <div class="char-remain"> for cosmetics.

 

PART 2) THE JAVASCRIPT

window.addEventListener("load", () => {
  // (A) GET TEXTAREA + REMAINING COUNTER
  let textarea = document.querySelector(".char-remain-txt"),
      remain = document.querySelector(".char-remain-count");
 
  // (B) INIT REMAINING CHARACTERS
  remain.innerHTML = textarea.maxLength;
 
  // (C) CALCULATE REMAINING CHARACTERS WHILE TYPING
  textarea.addEventListener("keyup", () => remain.innerHTML = textarea.maxLength - textarea.value.length);
});

1. On window load, we get the <textarea> and remaining counter <div>.
2. Initialize the counter, set it to the maxLength of the <textarea>.
3. Listen to the keyup event on the <textarea>. Calculate the remaining characters and update the HTML.

 

 

EXTRA) MULTIPLE INSTANCES

<!-- (A) GENERATE MULTIPLE OF THESE TEXT AREAS -->
<div class="char-remain">
  <textarea maxlength="160" class="char-remain-txt"></textarea>
  <div class="char-remain-count"></div>
</div>
 
<!-- (B) JAVASCRIPT -->
for (a of document.querySelectorAll(".char-remain")) {
  let t = a.querySelector(".char-remain-txt"),
      r = a.querySelector(".char-remain-count");
  r.innerHTML = t.maxLength;
  t.addEventListener("keyup", () => r.innerHTML = t.maxLength - t.value.length);
}

No sweat – Just generate multiple text areas as usual. Then modify the Javascript a little to loop through all of them, attach the keyup listener.

 

EXTRA) CHARACTERS COUNTER

remain.innerHTML = 0;
textarea.addEventListener("keyup", () => remain.innerHTML = textarea.value.length);

If you want to count the total number of characters, just do a small tweak – Set it to textarea.value.length instead.

 

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse

This simple remaining character counter will work on all modern browsers.

 

LINKS & REFERENCES

• Example on CodePen – Remaining Characters Counter

 

INFOGRAPHIC CHEAT SHEET