Javascript: Calculate Characters Remaining In A TextArea

In this post, we'll create a Javascript event listener that calculates the number of characters that have been entered in a TextArea. The purpose here is not to demonstrate the quick and dirty solution, but rather to fully understand how the code actually works. This functionality is helpful for inline form validation and preventing users from hitting the server-side with invalid data. 

Let's start by setting up a basic HTML form, along with a script tag that we'll use to point to our Javascript file. 

<div id="page">
  <form id="messageForm">
    <h2>Compose A Tweet</h2>
    <textarea id="tweet"></textarea>
    <div id="charactersRemaining">180 characters</div>
  </form>
</div>
<script src="js/character-count.js"></script>

Notice here that we have two elements that our script will interact with: the text area and the div with an ID of charactersRemaining. The div will automatically update as we enter information into the text area. 

Next, we will initialize the javascript by adding an event listener to the textarea. 

var el;
el = document.getElementById('tweet');                   
el.addEventListener('keyup', countCharacters, false);

The general flow for any event listener comes in five parts: 

1. The element you want to listen on - el.

2. The declaration of the event listener - addEventListener.

3. The javascript method we want to listen for -  keyup. 

4. The unique method we will begin writing in the next step -  countCharacters. 

5. The return value (which is almost always set to false) - false. 

Now that we've referenced a method named countCharacters, let's begin using it! To begin with, it's important to note that any method that utilizes the event object generally sends that object through as an argument, abbreviated here as "e". 

function countCharacters(e) { 
    // we will put our script here
}

Next, let's think about what our script should actually do by writing some pseudo code. This will help us fully understand the method when it is complete.  

function countCharacters(e) {  
    // setup some variables 
    // get the number of characters in the tweet box 
    // number left = number of characters - our maximum (140) 
    // access the div for characters remaining 
    // put the number of characters left into that div! 
}

Finally, let's get down to business and write the code that will implement this method. We will use getElementById to access the elements we need, and then the length property to calculate the number of characters entered so far. 

function countCharacters(e) {  
    // setup some variables 
    var textEntered, countRemaining, counter;  
    // get the number of characters in the tweet box 
    textEntered = document.getElementById('tweet').value; 
    // number left = number of characters - our maximum (140) 
    counter = (140 - (textEntered.length)); 
    // access the div for characters remaining 
    countRemaining = document.getElementById('charactersRemaining');
    // put the number of characters left into that div! 
    countRemaining.textContent = counter;  
}

By putting it all together and removing the pseudo code, this is what the final Javascript file looks like. 

var el;                                                    

function countCharacters(e) {                                    
  var textEntered, countRemaining, counter;          
  textEntered = document.getElementById('tweet').value;  
  counter = (140 - (textEntered.length));
  countRemaining = document.getElementById('charactersRemaining'); 
  countRemaining.textContent = counter;       
}
el = document.getElementById('tweet');                   
el.addEventListener('keyup', countCharacters, false);

By rendering the HTML page in the browser, you can observe that we have a fully functional, albeit hopelessly ugly, TextArea counting mechanism!