Tag Archives: text input

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:

<style>
#showCountdown {
  font-size: 12px;
  color: #3399ff
}
</style>

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

Only allow numbers to be entered in an HTML form text field

Sometimes, if you are adding say, a phone number into an input field, you don’t want people to enter letters.  This snippet contains a handy little regex to remove any non-number from an input as the user types.  It’s not foolproof, but it does the job.

Nice simple addition to forms to only allow letters in a text input field:

$("#yourInput").keyup(function()
    {
        if (/D/g.test(this.value))
        {
            // Remove the non-digits from the input
            this.value = this.value.replace(/D/g, '');
        }
    });

UPDATE (2018)

Given that this was a lazy post back when I wrote it, I’ve added a slightly updated version that will look for a change, and other inputs as well.  A few more event listeners will cover some of the users who may like to paste things into the box.

Remember, making forms look pretty before they are submitted it great, but it doesn’t replace proper server-side validation of the input at the other end.  If you are using a database, don’t just sanitise, prepare.

$("#yourInput").on("keyup paste change", function()) 
{ 
  if (/D/g.test(this.value)) 
  { 
    this.value = this.value.replace(/D/g, ''); 
  } 
});

 

Share this post:
read more