Textarea Character Counter with a Maximum Length

A textarea counter shows how many characters remain while the visitor types. The original Plus2net example limits the field to 50 characters and updates a Characters Left field. That facility is retained.

The older version listened to keypress and keydown, then trimmed text manually. For text-entry changes, the input event is a better fit, while the native maxlength attribute prevents the textarea from exceeding the limit.

Demo of textarea counter

Textarea and Counter Top ↑

<form id="counter-form">
  <label for="my-text">Message</label><br>
  <textarea id="my-text" name="my_text" rows="4" cols="30" maxlength="50"></textarea>
  <br>
  <input id="text-num" name="text_num" size="2" value="50" readonly> Characters Left
</form>

JavaScript Top ↑

const textarea = document.getElementById("my-text");
const counter = document.getElementById("text-num");
const maxLen = 50;

function updateCounter() {
  const remaining = maxLen - textarea.value.length;
  counter.value = remaining;
}

textarea.addEventListener("input", updateCounter);
updateCounter();

Complete Working Page Top ↑

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Textarea character counter</title></head><body>
<form id="counter-form">
  <label for="my-text">Message</label><br>
  <textarea id="my-text" name="my_text" rows="4" cols="30" maxlength="50"></textarea>
  <br>
  <input id="text-num" name="text_num" size="2" value="50" readonly> Characters Left
</form>
<script>const textarea = document.getElementById("my-text");
const counter = document.getElementById("text-num");
const maxLen = 50;

function updateCounter() {
  const remaining = maxLen - textarea.value.length;
  counter.value = remaining;
}

textarea.addEventListener("input", updateCounter);
updateCounter();</script>
</body></html>

Using jQuery: develop a related counter with the jQuery keyup event.

Event Handling onMouseOver and onMouseOut

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Raman	23-04-2013
The code was right but need for button disabling with alert too

srilakshmi	19-12-2014
great job this is simple user understandable code,nd this helps me thanqx.

Akshit Saxena	25-08-2015
what if we press the "Backspace"... the code crashes in word count in that case... cannot be applied to major project.. can you please help it out...??

duna	30-05-2012
thank you, this worked well for me.

shana	10-07-2012
its very useful to all

Peter	19-07-2012
Thanks, u helped me so much :)

Cristian	04-10-2012
thanks a lot for the code!