Adding Character Count to Textareas

Continuing my Textarea saga.

Users are an unfortunate reality of the software development cycle. Ideally, the perfect code I write sits idly in a box readily available, scalable, containerized, and any other jargon you can think of, but we do not live in a perfect world.

Anyway, here’s a tutorial for how to add a character counter for all of the textareas in your application. If you’re interested I also wrote a blog on the best posts of November 2020.

Editing The Default Footer

In the default footer template of your application put the following code.

$('textarea').each(function (index) {
	max = $(this).attr("maxlength") ? $(this).attr("maxlength") : 500;
  var len = $(this).val().length;
	$(this).after("<span id='character_counter_"+ index +"'>"+ len +" / "+ max +"</span>");

	$(this).keyup(function () {
		len = $(this).val().length;
		$('#character_counter_' + index).html(len +" / "+ max);

This will loop through all the textareas on your page, add a span after it that displays the current character count of the textarea and its maxlength, and attaches an event handler to it that updates the character count.

I’m not intimately familiar with how you have your textareas so I’ll let you style the span, but I got the hard part out of the way for you.


Another short one! šŸŽ‰ Don’t want to bore you with too much of my Technical Brillianceā„¢, so I’ll leave you wanting more.

Subscribe, or don’t. Tutorials are still coming out Tuesdays and Thoughts on Thursdays.

See ya Thursday!