Tag Archives: character countdown

Create a character countdown for text inputs and textarea’s using jQuery

I think it may have been Twitter that first pioneered the use of the text character countdown years ago.  I could be wrong, maybe they just popularised it, but either way, it is a convenient way of keeping user inputs to a length that is acceptable to your site.

I’m not sure that this is the place to mention it, but I do still find myself writing shorter tweets, despite the limit raise a while ago.

There are going to be three main parts to this:

  • Create an HTML form that needs the input characters kept in check.
  • Write some jQuery code to keep an eye on what is happening when the user’s types.
  • Style a little blank <span> underneath the input to show the user how they are getting on.

For those of you that read regularly, you will know I am a big Bootstrap fan (hark the Twitter reference again), so the form has some Bootstrap elements to it.  This form will work just as well without the BS references.

Create the input:

<label for="myInput"><strong>My Limited Input:</strong></label>
<input class="form-control" type="text" id="myInput" maxlength="50">
<span id="showCountdown" class=limits"></span>

I’ve used the HTML “maxlength” in the above snippet so that the browser automatically restricts any more inputs at that point.  The HTML “maxlength” has nothing to do with the character countdown.  “maxlength” is universally accepted on most browsers except for the ancient, so you shouldn’t run into many [if any] compatibility problems.

Just for curiosities sake, the default value for maxlength is 524288.

Next, we need to add some jQuery to do the counting and append the <span> underneath the input:

$('#myInput').on("keyup change", function ()) {

  const max = 50;
  const len = $(this).val().length;

  if (len >= max) {
    $('#showCountdown').text("No more room ...");
  } else {

    const char = max - len;
    $('#showCountdown').text(char + ' characters remaining');

So what’s happening here?

The browser is looking for either a keyup event or a change event occurring in the input.  Change is handy because, in the majority of cases, the will also catch the user if they try and paste something into the box.  When the event is detected, it counts the length of the string inside the input.  It then compares it to the max variable we’ve included and deducts one from the other.

After evaluating whether the length of the input is smaller (by x number) or equal to the max value, it adds an appropriate message into the empty span underneath the box.

Now a little styling:

#showCountdown {
  font-size: 12px;
  color: #3399ff

You can style this in any way you wish.

Below is an example of this text input in action on a site I’m working on at the moment,  Although I think I used dodgerblue as the colour:



Share this post:
read more