Really simple jQuery character countdown in textarea

By Geoff Muskett

Looking to build a Twitter-like textarea character countdown to show your users how much space they have remaining?

Good. See below.

See the Pen Really easy textarea character countdown by Geoff Muskett (@geoffmuskett) on CodePen.6289

I’ve seen a few tutorials online but they seem to make it more complex than it needs to be. Just a few lines of jQuery does the trick.

1. Set a variable for the max number of characters:

var maxLength = 100;

2. Use the keyup event on the textarea, which fires each time a key is pressed when the textarea is in focus. Ideal:

$('textarea').keyup(function() {

3. Check the value and get the length of it, store it in a variable:

var length = $(this).val().length;

4. Take that value away from your max width:

var length = maxLength-length;

5. Put the result somewhere on the page:

$('#chars').text(length);

Done.

Comments

Reynald
November 27, 2014

When I try to run this through visual studio on IE, it doesn't work. Any idea why? It works in IE when looking at your page.

Geoff Muskett
December 20, 2014

Hi Reynald, sorry for the slow reply. I really need to set up notifications for comments!

I wouldn't worry about not working in visual studio, I've never used it, but if the site works in the wild thats fine.

That said, you could try keypress instead of keyup. I don't think support is that great on older windows phones for that through.

Best of luck

Paulo Henrique
March 24, 2015

$('#mesage').prop('maxlength', '1500');

shegun
July 28, 2015

Mix characters with line breaks and the text counter counts wrongly.

Geoff Muskett
July 29, 2015

If you're allowing HTML in there you'd something more advanced than this. Perhaps you could detect wether < or > keys have been pressed and ignore them. Or look for
with regex perhaps.

Robert Oswald
August 16, 2015

I think it's worth mentioning that "maxlength" is not supported on textareas in IE prior v10 in case legacy browser support is a requirement.

Rob Sanders
October 16, 2015

Carriage returns count as 2 characters. It would help to add logic with regex to count and adjust your character countdown based on the number of carriage returns.

Also using
var maxLength = $(this).attr('maxlength');
will dynamically obtain a value from the textarea attribute for maxlength.

Freddy Sidauruk
October 28, 2015

hi i have success use your code but why when textarea more than 100 users still can tying !
please guide me

Kiran
November 5, 2015

tjsi code is working fine for me on bith IE and Chrom..but the problem is we on maing page i'm having diffrent cards and each cards having a text are..if selected card 1 and enterd 3 characteres ans saved...and while i'm selecting the second card its still shows the remaing caharacters from the first cards...Can you help mr to reslove this?

Maria
November 16, 2015

My plugin :
There is a demo page showing all options and usage
https://github.com/rothy1248/charlimit

Maria
November 17, 2015

You can also use this
https://github.com/rothy1248/charlimit

Chris
February 17, 2016

Thanks for taking the time to post this, but there is a small bug with your script. Press and hold enter (while focused on the textarea) and then start typing. The count doesn't update properly and I can still type 2 characters afterwards. Thats in Chrome. Hope this helps.

Anonymous
March 29, 2016

Really simple? This is *too* simple, because it doesn't allow for changes made via the mouse or Edit menu.

Cliff
October 13, 2016

Thank you for this!

Atanu Dey
November 26, 2016

Simple and effective. Good work.

Govinda
December 22, 2016

Nice one.... Short but Sweet....

Ian
May 9, 2017

Nice and simple, took me around 20 seconds to have this working on my site.
Cheers!

Paul
May 12, 2017

This was way easy

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.