How to Make a Character Count in Textarea using JavaScript

We have seen live character count functionality in the textarea on many websites like Twitter. This character counter helps to show live notifications about the number of characters entered in the text box field.

Live Character Counter restricts the text box field by the character limitation. We will show you an example of make a character count in textarea using JavaScript.

In this post, we have used Character Counter for many purposes like live character count on the text entered, characters count with the max length, and show remaining character count value when user typing.

Javascript Example of Live Character Count In Textarea

Let’s check it out how to add a character count feature on a web page using JavaScript.

Character Count Validation:

Below javascript character count code counts the number of characters entered and the count will be updated on typing text dynamically beside the text box.

HTML Code:

JavaScript Character Count Code:

OutPut:

Remaining Textarea Characters Count Value:

Below code counts the remaining characters in the textarea input field and will display whether the user exceeds the limit of maximum length.

HTML Code:

JavaScript Code to get Remaining Characters:

In this example, we have set the maximum length as 50 characters, and dynamically calculating the entered string length.

OutPut:

Textarea Character Count with Maximum Length Warning

Use the following code which counts characters and display how many characters are entered in the maximum character.

HTML code:

JavaScript Code:

OutPut:

LIVE DEMO