Textarea characters count

This article describes how can we implement textarea characters count that can also work during cut/copy and paste as well as you can also select characters upto desired length or can show reverse counting (characters remaining) in textarea. There are many tutorials online but they seem to make it more complex than it needs to be. Just a few lines of jQuery does the trick.

VIEW DEMO

Textarea characters count

First of all we need to include jQuery library in our page. If you don’t have already included one, You can use Google hosted library or jQuery repository or download & place at your server and add path to your page.

We have a textarea input in our page with id ‘ta_count‘

Before the end of body we need to place a jquery function that will handle ‘propertychange‘ event as follow:

Now all is done. The code above will show like  1 character  or  5 characters  to div below the textarea.

VIEW DEMO

You can manipulate or improve the code in many ways. For example:

To show characters remaining, you can un-comment line #3 and modify code in following way below:

To limit and set textarea user input to max allowed characters:

$(this).val($(this).val().substring(0, max_len));

Or change color of counter, take advantage of jQuery class functions and add before closing of function :

This is all about implementing textarea characters count and with a minimal change in code, you can also show remaining characters count or can change colour of counter or limit the user input by selecting only maximum allowed characters.

Complete code of our demo is as follow: