Simple Textarea Remaining Characters Counter (Free Download)

Welcome to a tutorial on how to create a text area remaining character counter using 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.

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo Character Countdown Useful Bits
The End

 

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised – Also a quick demo.

 

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

 

 

JAVASCRIPT CHARACTER COUNTDOWN

All right, let us now get into the steps of creating the character countdown.

 

PART 1) THE HTML

char-remain.html
<div class="char-remain" id="demo">
  <!-- (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

char-remain.js
window.addEventListener("load", () => {
  // (A) GET TEXTAREA + REMAINING COUNTER
  let textarea = document.querySelector("#demo .char-remain-txt"),
      remain = document.querySelector("#demo .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.

 

 

USEFUL BITS

That is all for the main project, and here are some extras that you may find useful.

 

COMPATIBILITY CHECKS

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

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Remaining Character Counter (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short guide. I hope that this guide has helped you to create a better project, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Simple Textarea Remaining Characters Counter (Free Download)”

Leave a Comment

Your email address will not be published.