Simple Textarea With 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?

<textarea id="demoA" maxlength="160"></textarea>
<div id="demoB">160</div>
 
<script>
var a = document.getElementById("demoA"),
    b = document.getElementById("demoB");
a.addEventListener("keyup", () => b.innerHTML = a.maxLength - a.value.length);
</script>

Yep, it’s as easy as listening to the key presses and calculating the remaining characters. But I have packaged this into a simple reusable widget – Read on!

 

 

TABLE OF CONTENTS

 

 

REMAINING CHARACTERS DEMO

<!-- LOAD THE CSS & JS -->
<link rel="stylesheet" href="char-remain.css">
<script defer src="char-remain.js"></script>

<!-- DEFINE TEXTAREA -->
<textarea maxlength="160" class="tr"></textarea>
<input type="text" maxlength="60" class="tr">

For you guys who just want to use this as a “plugin”:

• Load the CSS and Javascript. Captain Obvious at your service.
• Define <textarea> and/or <input type="text"> as usual. Specify the maxlength and give it class="tr".

That’s all.

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

VIDEO TUTORIAL

 

PART 1) THE HTML

<textarea maxlength="160" class="tr"></textarea>
<input type="text" maxlength="60" class="tr">

Look no further, these are the “usual normal” <textarea maxlength="N"> <input maxlength="N">. Just add a class="tr" CSS class to it.

 

 

PART 2) THE JAVASCRIPT

window.addEventListener("load", () => {
  for (let textarea of document.querySelectorAll("textarea.tr, input.tr")) {
    // (A) ATTACH HTML WRAPPER
    let wrap = document.createElement("div");
    wrap.className = "tr-wrap";
    textarea.parentNode.insertBefore(wrap, textarea);
    wrap.appendChild(textarea);
 
    // (B) ATTACH REMAINING COUNTER
    let counter = document.createElement("div");
    counter.className = "tr-counter";
    counter.innerHTML = textarea.maxLength;
    wrap.appendChild(counter);
 
    // (C) CALCULATE REMAINING CHARACTERS WHILE TYPING
    textarea.addEventListener("keyup", () => counter.innerHTML = textarea.maxLength - textarea.value.length);
  }
});

Some beginners may find this intimidating, but keep calm and look carefully.

• On window load, we loop through all the <textarea class="tr"><input class="tr">.
• (A & B) Update the HTML – <div class="tr-wrap"><textarea class="tr"></textarea> <div class="tr-counter"></div> </div>. Yep, we are pretty much just adding a counter below the text area.
• (C) Same in the introduction snippet – Listen to the keyup event on the <textarea><input>. Calculate the remaining characters and update the HTML.

 

 

 

TOTAL CHARACTERS COUNTER

counter.innerHTML = 0;
textarea.addEventListener("keyup", () => counter.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.