Count Textarea Characters with JavaScript

I've been playing around with the Twitter API lately and, as you know, Tweets can only be 140 characters long. I wanted to use a textarea element, not an input type="text", so I couldn't just use maxchars to limit the number of characters. Additionally, I get annoyed when my text is chopped off when pasting. So, what to do? Well, I thought, why not make a little character counter like the one you find on the actual Twitter?

The first step is to create the JavaScript function. I placed mine in a file called count-chars.js and it looks like this:

1.   function countChars(textbox, counter, max) {
2.     var count = max - document.getElementById(textbox).value.length;
3.     if (count < 0) { document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>"; }
4.     else { document.getElementById(counter).innerHTML = count; }
5.   }

textbox and counter are the IDs of the elements of the textarea we're counting and the span where the count is going to go, respectively.

There's lots you can customize there. You could disable the form if too many characters are entered or you could automatically truncate the text. But, I prefer to just have the warning show up in red text.

The next step is to write the HTML itself:

1.   <script type="text/javascript" src="/js/count-chars.js"></script>
2.   <form action="#" method="post">
3.   <p>Tweet Something: <span id="char_count"></span><br /><textarea name="tweet" id="textbox" rows="3" cols="60" onFocus="countChars('textbox','char_count',140)" onKeyDown="countChars('textbox','char_count',140)" onKeyUp="countChars('textbox','char_count',140)"></textarea></p>
4.   <p><input type="submit" class="button" value="Tweet" /></p>
5.   </form>

Hopefully, that's all pretty self-explanatory. You can change the 140 to be whatever character length you're looking for. (Make sure to change it in all 3 spots, though!)

Here's what the finished result looks like:

Tweet Something:

Nothing too fancy, for sure, but hopefully it will help. If you have questions or comments, let me know.


August 26, 2011, 3:48 pm
Hi! Thanks for this tip. I thought about it and noticed, than brake line make 2 chars instead of 1. It happens in Opera browser, because it makes 'rn'. Also there it is not counts chars if I past them from context menu with only mouse use.
August 26, 2011, 3:54 pm
After several times I use something like this:

function charsCounter() {
var place = document.getElementById('chars-left')
var content = document.getElementById('micropost_content').value.replace(/rn/g, "n")
var result = 140 - content.length
if(result < 0) { = "red"
} else { = "green"
place.innerHTML = result

I know, it's primitive, but should work fine. I also call this function onFocus with setInterval and stop onblur with clearInterval, because failed to find event for count chars when past them from context menu only with mouse.
November 16, 2011, 12:51 am
How can I make the "140" appear before the text box has the browser's focus? I am using FireFox so that might be why it is not working for me. This was very helpful by the way. Thank you so much!
November 16, 2011, 7:55 am
You could add 140 in between the span "char_count" opening and closing tags. The only issue then is that if there's already text in your input box, 140 isn't the right number. An alternative would be to launch the countChars('textbox','char_count',140) function on page load.
January 22, 2012, 5:34 am
Totally rocks! Thanks 10^6
March 13, 2012, 3:10 pm
Thank you very much, sir!!!
Your explanation is much clear to me.
March 24, 2013, 3:59 am
Thanks a bunch!
April 26, 2013, 4:29 pm
it is working fine but it is not restricting the 140 charecter
sunny verma
May 1, 2013, 8:11 am
Hi! Thanks for this tip. This is too useful for me.!
May 5, 2013, 11:03 am
Simple ! Exactly what i was searching for ! Thanks !
Ivan Muzahuzi
May 19, 2013, 6:37 am
Thanks Man for your assistance… It was really helpful.
December 17, 2015, 5:42 am
Hey Robert,

Thank you for the amazing tip. Do you have any simple code to count the number of characters in a text area. I am working with a tool where it required through Javascript
Robert James Reese
December 17, 2015, 5:51 am
James, if you just remove the "max - " from line 2 of the JavaScript function above, that should get you there.
October 5, 2016, 3:34 am
How can I keep the counter, yet stop text input when the character count reaches 140?

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on February 26th, 2011 by Robert James Reese in the following categories: HTML and JavaScript. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.