How to Count Textarea Characters Using JavaScript

by

This tutorial will help you How to count Textarea characters using javascript. Even you will get free source code to integrate into your project. It will show total characters, maximum characters & remaining characters of the Textarea field in a live notification.

You will see the live notification Whenever the user begins to enter text into the Textarea field. It is very simple to implement & understand. So, you can easily create live characters counter Using javascript.

You can also use it with another text field of the form to validate the input data. Once you learn it, you will quickly implement another input field.

Learn also –

How to create auto Resize Textarea Using JavaScript

Count Total Textarea Characters

In some projects, you need to count total characters inside the Textarea. So that you can easily know how many characters are written in the Textarea. If you implement this feature in your project then you will need not to go to another website that allows counting total characters.

Now, To write code for it, you have to go through the following steps –

  • First all create a Textarea input field and declare a method totalChars(this) to the onkeydown event attribute.
  • Create a div with id="totalChars" to display the total number of characters written in Textarea.
  • Create an anonymous function to calculate total characters  and assign it to the totalChars.

File Name – total-characters.php

<!DOCTYPE html>
<html>
<head>
<title>Count Total Textarea Characters</title>
<style>

textarea{
width:100%;
Height:80px;
}
textarea:focus{
outline:none;
}
.textarea-container h3{
 color:blue;
 margin-top:50px;
}
.textarea-container{
 padding-left:20%;
 width:50%;
}
</style>


<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>


<div class="textarea-container">
  <textarea onkeydown="totalChars(this)" placeholder="Enter Characters.."></textarea>
    <div>Total Characters: <span id="totalChars"> 0</span></div>
</div>


<script type="text/javascript">
var totalChars= function(input){
 document.getElementById('totalChars').innerHTML= input.value.length;
}
</script>
</body>
</html>

 

You should note that this code returns the result to count all the text, whitespace & special characters. You can also use this code for multiple Textarea in one or more web pages.

 

Count Textarea Characters Limit

In some projects, you need to count the characters limit inside the Textarea. So that you can easily know how many characters are written &  allowed. This the best feature to use in the project.

Now, To write code for it, you have to configure the following steps –

  • First of all, create a Textarea input field and declare a method maximumChars(50,this) to the onkeydown event attribute. In this method, the total characters limit is 50. you can change it with your own value. for example, if you want to keep the total limit of 150 then you will have to pass 150 instead of 50.
  • Create a div with id="maxChars" to display allowed & written number of characters.
  • Create a function with two parameters maxChars and input to calculate total characters  and assign it to the maximumChars. after that write some lines of code within this function according to the following steps –
    • Get the length of input characters and assign them to the totalChars
    • Access div id maxChars and assign to the displayChars
    • If maxChars is greater than totalCharsthen make green Textarea and display a message in div otherwise make red Textarea and display an error message.

File Name – characters-limit.php

<!DOCTYPE html>
<html>
<head>
<title>Count Textarea Characters limit</title>

<style>

textarea{
width:100%;
Height:80px;
}
textarea:focus{
outline:none;
}
.textarea-container h3{
 color:blue;
 margin-top:50px;
}
.textarea-container{
 padding-left:20%;
 width:50%;
}
</style>

</head>
<body>

<div class="textarea-container">
  <textarea onkeydown="maximumChars(50,this)" placeholder="Enter Characters.."></textarea>
 <div><span id="maxChars"> </span></div>
</div>

<script type="text/javascript">
  var maximumChars= function(maxChars, input){
 
    var totalChars= input.value.length;
    var displayChars=document.getElementById('maxChars');
    
    if(maxChars>totalChars){
     displayChars.innerHTML=totalChars+" out of "+maxChars;
     displayChars.style.color="green";
     input.style.borderColor = "green";
    }else{
     displayChars.innerHTML="Maximum "+maxChars+" characters are allowed";
     displayChars.style.color="red";
     input.style.borderColor = "red";
    }
}
</script>

</body>
</html>

 

This code returns the maximum & written characters to count all the text, whitespace & special characters and. You can also integrate this source code for one or more Textarea.

Count Textarea Remaining Characters

n some projects, you need to count the remaining characters inside the Textarea. So that you can easily know how many characters are remained. If you want to show the remaining characters out of the maximum allowed characters then you should use this feature.

Now, To write code for it, you have to implement the following steps –

  • First all create a Textarea input field and declare a method remainingChars(50,this) to the onkeydown event attribute. In this method, the total characters limit is 50. you can change it with your own value. for example, if you want to keep the total limit 80 then you will have to pass 80 instead of 50.
  • Create a div with id="remainingChars" to display a number of remaining characters.
  • Create a function with two parameters maxChars and input to calculate total characters  and assign it to the remainingChars. after that write some lines of code within this function according to the following steps –
    • Get the length of input characters and assign them to the totalChars
    • Subtract maxChars  from totalChars and assign to the remaining
    • Access div id maxChars and assign to the displayChars
    • If remaining is greater than 0 then make green Textarea and display message in div otherwise make red Textarea and display an error message.

File Name – remaining-characters.php

<!DOCTYPE html>
<html>
<head>
<title>Count Textarea Remaining Characters </title>

<style>

textarea{
width:100%;
Height:80px;
}
textarea:focus{
outline:none;
}
.textarea-container h3{
 color:blue;
 margin-top:50px;
}
.textarea-container{
 padding-left:20%;
 width:50%;
}
</style>

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>

<div class="textarea-container">
  <textarea onkeydown="remainingChars(50, this)" placeholder="Enter Characters.."></textarea>
<div><span id="remainingChars"> </span></div>
</div>

<script type="text/javascript">
  var remainingChars= function(maxChars, input){
    var totalChars= input.value.length;
    var remaining= (maxChars - totalChars);
    var displayChars=document.getElementById('remainingChars');
   
    if(remaining>0){
    displayChars.innerHTML="Remaining characters: "+remaining;
    displayChars.style.color="green";
    input.style.borderColor = "green";
    }else{
    displayChars.innerHTML="Remaining character: 0";
    displayChars.style.color="red";
    input.style.borderColor = "red";
    }
}
</script>
</body>
</html>

 

This code returns the remaining to count all the text, whitespace & special characters and. You can also implement this source code for one or more Textarea.

My Suggestion

I hope you have learned the above script. If you have any questions, you can ask me through the below comment box. Even you can suggest topics related to web technology.

I will share more tutorials with the best concept & Standard coding. So, you should visit my blog to become an expert in the coding field. Even share with your friends those who need it.