How to Count Textarea Characters Using JavaScript

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.

count textarea counters using javascript

Now you will learn the following types of characters counter. So, read complete tutorials without skipping any one of the given points.

Total Textarea Characters Count

Create Textarea Field Using HTML. you will use it to count the total number of characters.

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

Write the Javascript code to count the total characters.

var totalChars= function(input){
 document.getElementById('totalChars').innerHTML= input.value.length;
}

Textarea Characters Limit Count

Create Textarea Field Using HTML. You will use it to count the maximum characters.

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

Write the javascript to count the characters’ limit.

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";
    }
}

Textarea Remaining Characters Count

Create Textarea using HTML. It will be used to count the remaining characters.

<textarea onkeydown="remainingChars(10, this)" placeholder="Enter Characters.."></textarea>
<div><span id="remainingChars"> </span></div>

Write Javascript code to count the remaining characters.

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";
    }

}

 

Use the Complete Source Code

You can use the following complete source code. It contains HTML, CSS & javascript code. Even you can use it for the demo.

<!DOCTYPE html>
<html>
<head>
<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">
<h3>Total Characters Counter</h3>
<textarea onkeydown="totalChars(this)" placeholder="Enter Characters.."></textarea>
<div>Total Characters: <span id="totalChars"> 0</span></div>

<h3>Maximum Characters Counter</h3>
<textarea onkeydown="maximumChars(20,this)" placeholder="Enter Characters.."></textarea>
<div><span id="maxChars"> </span></div>

<h3>Remaining Charcters Counter</h3>
<textarea onkeydown="remainingChars(10, this)" placeholder="Enter Characters.."></textarea>
<div><span id="remainingChars"> </span></div>
</div>

<script>
// count total textarea characters
var totalChars= function(input){
 document.getElementById('totalChars').innerHTML= input.value.length;
}

// count maximum textarea characters limit
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";
    }

}

// count remaining textarea characters
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>

 

Recommended Topics

How to Create Tree Structure in JavaScript

How to Convert HTML to PDF Using JavaScript

 

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.

Leave a Comment