Twitter Character Limit in Vanilla JavaScript

If you are on Twitter, then you are familiar with the 140-character limit for Tweets. The Twitter character limit is based on the SMS support of 160 characters except that 20 characters are reserved for the sender’s name. Many websites use very similar functions on forms to restrain the size of data being sent to a server or database, and they use them for both text fields or textareas.

In this post, we’ll create a character limit script that’ll work very much like Twitter’s. It’ll fire when you press down on a key and also change the counter text color red when the user is about to reach the limit by a certain number of characters.


The HTML

First, we need to create a container with our textarea and character counter. The script will access the class names msg and char-left after we write it.

<div class="container">
    <textarea class="msg" rows="5" cols="35"></textarea>
    <p class="char-left"></p>
</div>

The CSS

Then for the CSS, let’s give this textarea some shape so that there’s some space around the text and the character counter is aligned to the right. We’ll use .warning to change the color of the counter when the user is approaching the character limit.

body, textarea {
    font-family: Roboto, sans-serif;
}
.container {
    width: 300px;
}
.msg, .char-left {
    font-size: 12pt;
}
.msg {
    padding: 8px;
    width: 284px;
}
.char-left {
    text-align: right;
}
.warning {
    color: #c00;
}

The JavaScript

Inside a single JavaScript function that shall invoke itself on load, we’ll set variables for the textarea (msg), class name for the character counter element (charLeftLabel), character counter element itself (charLeft), maximum characters allowed (maxChar), and the number of characters left for the limit warning (maxCharWarn).

(function(){
  var msg = document.getElementsByClassName("msg")[0],
      charLeftLabel = "char-left",
      charLeft = document.getElementsByClassName(charLeftLabel)[0],
      maxChar = 140,
      maxCharWarn = 20;

})();

Then, the rest of the function will show the characters remaining on load and then update it while the user is typing. After every one-millisecond timeout after keydown, it’ll subtract the length of the message from the maximum characters the user can type to get the characters remaining. Since we want to change the color of the character counter to red when 20 characters remain, the last two lines of the setTimeout() function will toggle the warning class associated with it.

(function(){
     . . .
     // show characters left at start
     charLeftLabel.innerHTML = maxChar;

     // update while typing
     msg.onkeydown = function(){
       setTimeout(function(){
         charLeft.innerHTML = maxChar - msg.value.length;

         // whether or not to display warning class based on characters left
         var warnLabel = msg.value.length >= maxChar - maxCharWarn ? " warning" : "";
         charLeft.className = charLeftLabel + warnLabel;
       }, 1); 
     };
})();

Conclusion

In the long run, all we need is a textarea or other text input, an empty element for a counter, and a single function to count the characters left before the limit. In the function, we basically set the limit and the warning number, show the number left at the start, and then immediately update that number (and change it to red if close to the limit) after every key pressed down.

View result


Posted in: JavaScript