jQuery | How to count number of characters in textarea (YouTube, Twitter)

In this tutorial we will show you how to create comment section like YouTube or twitter that count number of characters in textarea & show the number to exceed the limit of the textarea using simple jQuery. Here is the demo of our example,
[wp-js-fiddle url=”http://jsfiddle.net/moinsam/48Gxp/” style=”width:95%;height:190px;border:solid #4173A0 1px;”]

Step 1 (count number of characters in textarea)

Our first step is to add the following code in our html page

<label for="description">Description:</label>
<textarea name="description" id="description" cols="60" rows="5" maxlength="255" placeholder="Describe about something..."></textarea>
<div id="characterLeft"></div>

Here we addmaxlength="255"attribute in the textarea tag, which means this textarea takes text that contain 255 characters. More than 255 character will be ignored. After that we add a div element withid="characterLeft" which will show the number to exceed the limit of the textarea that we define in maxlength attribute.

Step 2

Our second step is to add the following jQuery code in our script file.

$('#characterLeft').text('255 characters left');
$('#description').keyup(function () {
    var max = 255;
    var len = $(this).val().length;
    if (len >= max) {
        $('#characterLeft').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#characterLeft').text(ch + ' characters left');
    }
});

In the above script in line 1 we just add a default text which you see at the bottom of the textarea. Next in line 2 to line 11 we call a jQuery keyup api which bind an event handler to the “keyup” javascript event or trigger that event on an element. In this case the “keyup” event triggered on the textarea that is bind using id of the textarea. When the “keyup” event occur it triggered the handler function which is from line 3 to line 10. Inside the function we get the length of the text of the textarea and compare it with our predefined length and then update the div element output.

We have explained the code as detail as possible. If you have any question about this tutorial, please post comment. Thanks

Post Tagged with , , ,

10 Responses so far.

  1. aromatherapy says:

    I’m really loving the theme/design of your blog. Do you ever run into any web browser compatibility issues? A number of my blog audience have complained about my website not working correctly in Explorer but looks great in Safari. Do you have any suggestions to help fix this issue?

  2. Rob says:

    Nice little jQuery character counter plugin for this here: http://wchar.websanova.com

  3. pradeep vishwakarma says:

    i am counting number of characters in textarea using jquery above your code. and issue with your code
    if i will copy content from other place and paste on textarea then not count correct character.. please reply this issue.

    • Md. Moin Uddin says:

      I have tested the it. I just copy some text and paste on the text area and then count and get correct result. Thanks

  4. JEROME says:

    Simple and perfect solution!

    Thanks a lot for sharing !

  5. Pawan Kumar says:

    Hi Md. Moin Uddin, this plugin works for me. thanks

  6. Srinivas says:

    I have tried this for rich text field… it is not working. Any inputs??

  7. STUBR.BS says:

    This solution will not work in Chrome, because if you copy/paste something into the textarea field, it will count line breaks wrong. Each line break is counted as 2 characters.

  8. tds says:

    Thx, used for summernote editor. Modificated variant:
    $(‘#countdown’).text(‘255 characters left’);
    $(‘#create_article_text’).on(‘summernote.keyup’, function(we, e) {
    var max = 255;
    var myCode = $(this).val();
    // replace special symbol html
    var cleanCode = myCode.replace(//gm, ”).replace(/(\r\n|\n|\r)/gm,””).replace(‘ ‘,”);
    var len = cleanCode.length;
    console.log(myCode);
    if (len >= max) {
    $(‘#countdown’).text(‘ you have reached the limit’);
    } else {
    var ch = max – len;
    $(‘#countdown’).text(ch + ‘ characters left’);
    }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 5 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.