Live Characters Counter Using JavaScript

Here in this tutorial, we will make a live characters counter functionality using javascript to count the real-time characters typed in the textbox.

The live characters counter functionality is that which tells us how many total characters we entered in the text field or textarea and how remaining.

With the help of the live characters counter, you can show the live indication of how many characters you have entered and how many you can enter.

Let’s get started to build live characters counter functionality using the javascript code.

Table of Contents

1 Live Characters Counter Using JavaScript

1.1 Typed Characters Count

1.2 Remaining Characters Count

2 Conclusion

Live Characters Counter Using JavaScript

To make the live characters counter, you have to follow this article till the end. I will show you in detail each step.

First, we will make a live character count functionality which tells us how many total characters we entered in the textarea.

Typed Characters Count

Let’s have a basic HTML structure of a web page that has an HTML form and form has a textarea field. On that textarea field, we will implement our live counter functionality.

<!DOCTYPE html>
<html>
   <head>
      <title>Live Characters Count</title>
   </head>
   <body>

   <h2>Live Characters Count</h2>

   <form action="/action_page.php">
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="liveCharactersCount(this);"></textarea><br>
      <input type="submit" value="Submit">
   </form> 

   <p id="characters-count-notification">0 characters</p>

   </body>
</html>

Now we will make a javascript function to count the total entered characters in that textarea box. We will make a function and then trigger that function on the onkeyup event of textarea.

 <script>function liveCharactersCount(obj){
      document.getElementById("characters-count-notification").innerHTML = obj.value.length+' characters';
   }</script>

Just add the above javascript code in your webpage’s head section or in the footer. You can also make a separate file and then embed it on the page where your textarea.

Remaining Characters Count

Now we will make javascript functionality that will tell us how many characters remaining that you can enter in the textbox.

To make the remaining characters count functionality, we will make a javascript function that has max length characters constant. And then we will subtract the typed characters count from that max length constant, so we will get the remaining characters.

Let’s take the same HTML code as above for reference.

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

   <h2>Remaining Characters Count</h2>

   <form action="/action_page.php">
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="remainingCharactersCount(this);"></textarea><br>
      <input type="submit" value="Submit">
   </form> 

   <p id="characters-count-notification">200 characters remaining</p>

   </body>
</html>

Now, let’s make a javascript function to calculate the total count of characters and then show the remaining character’s counts.

 <script>function remainingCharactersCount(obj){
      var maxLength = 200;
      var charLength = obj.value.length;
      var charRemaining = (maxLength - charLength);
    
      if(charRemaining < 0){
         document.getElementById("characters-count-notification").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
      } else {
         document.getElementById("characters-count-notification").innerHTML = charRemaining+' characters remaining';
      }
   }</script>

So simply just add the above javascript code in the head section of the HTML page or in a separate file to call this function. You can customize it as you want and make it more stylish using CSS and bootstrap.

Conclusion

So in this tutorial, you learned about how to make live characters counter functionality in javascript. Built the functionality to show the notification message of how many total characters you entered and how many characters left.

If you found this helpful please do appreciate it by commenting and sharing it in your network. Or if you have any questions please ask me in the comment section, I will respond to you as soon as possible.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Live Characters Counter Using JavaScript

Live Characters Counter Using JavaScript

Typed Characters Count

Remaining Characters Count

Conclusion

About the Author: Aman Mehra

Leave a Reply Cancel reply

Live Characters Counter Using JavaScript

Typed Characters Count

Remaining Characters Count

Conclusion

You May Also Like

Bluebird JavaScript Library – BbPromise Complete Guide

How to Convert String Value to Array in JavaScript?

How to Get Substring From String in JavaScript?

JavaScript For Loop – With Examples

Export HTML Table to Excel (XLSX or XLS) Using JavaScript

How to Use Google Maps JavaScript API for Autocomplete Places?

About the Author: Aman Mehra

Leave a Reply Cancel reply