Skip to content

jQuery Textarea Character Counter – Live Demo

Share Button

Below code allows users to keep track on total number of characters in the text area. Total number of remaining characters will be displayed to give user a hint how many characters they’ve got left to use. In addition to character counter I’ve applied a character percentage bar that visualize remaining characters… just for fun(and because it looks cool).

 

There are 3 files to the code:

index.html  – HTML

script.js       – jQuery Code

styles.css    – CSS

 

jquery_character_counter

Live Demo

 

 

jQuery Code:

 

Here’s a jQuery code that will do all the magic. The code will count characters and return the remaining characters to be entered. Counting will be triggered on keyup() event. Also program will prevent entering extra characters and delete them.  Each time the total character count changes the character percentage bar will change it’s value as well. Appropriate comments were applied throughout the code.

 

script.js

// Run funtion on page load
$(document).ready(function(){
    //Total characters allowed in textarea
    var totalChars     = 100; 
    // Text area
    var countTextBox    = $('#textArea')    
    // Characters count
    var charsCounter    = $('#characterCounter');

    // Display total characters allowed on page load - initial value of characters 
    charsCounter.text(totalChars);

    // Percentage bar
    var percentageBarCount =$("#charsCounterBar").width();

    /* Action on event - Keydown */
    countTextBox.keyup(function() { 

        // Characters in text area         
        var charsInTextArea = this.value.length;

        // If characters exceed initial value(More characters than specified)
        if(charsInTextArea > totalChars)
        {
            /* Calculate extra characters to be deleted */
            var removeCharacters = (charsInTextArea-totalChars); 

            //If characters exceed total number of characers - REMOVE extra characters
            this.value = this.value.substring(0,totalChars);

            // hide character percentage bar
            $("#charsCounterBar").hide();
        }
        else{        
            /* Count remaining characters(Initial value - )
             i.e. 200-1=199 chracters remaining, 200-21 = 179 characters remaining.
             */
            charsCounter.text( totalChars - charsInTextArea );
            // show character percentage bar
            $("#charsCounterBar").show();
        }

        // percentage of characters remaining
        var getPercChars = charsInTextArea/totalChars;            
        // apply percentage of characters remaining to percentage bar
        var getPercToRemove = percentageBarCount*getPercChars;
        // update bar width by calculating new width
        var newPercentageBarValue = percentageBarCount-getPercToRemove;

        // update new width/length of character percentage bar
        $("#charsCounterBar").css("width",newPercentageBarValue)

    });
});

 

HTML Code:

 

Below is the markup for Character Counter. HTML is simple and I’ve applied a ShareMyWeb Logo above the Character Counter so you know that you can apply your own if you wish. Feel free to change, remove it … whatever 😉

 

index.html

<!DOCTYPE html>

<html>
    <head>
        
        <title>jQuery Textarea Character Counter with Characters percentage bar</title>        
        <!--ShareMyWeb.com Icon -->
        <link rel="shortcut icon" type="image/x-icon" href="http://sharemyweb.com/wp-content/uploads/2016/01/ShareMyWeb_Favicon.png" />         
        <!--CSS Styles-->
        <link rel="stylesheet" href="styles.css">
        <!--jQuery -->        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!--Main jQuery Script-->
        <script type="text/javascript" src="script.js"></script>
            
    </head>
    
    <body>  
        
        <div id='textAreaHolder'>
            
            <a id="shareMyWeb_link" class="logo" title="ShareMyWeb.com" href="http://sharemyweb.com/">
                <img id='shareMyWeb_logo' title="ShareMyWeb" alt="ShareMyWeb.com" src="http://sharemyweb.com/wp-content/uploads/2016/01/Fb_Sharemyweb_Logo_centered.png">
            </a>

            <textarea id="textArea" rows="5" placeholder="Visit ShareMyWeb.com"></textarea>
            
            <p>Remaining characters: 
                <strong>
                    <span name="characterCounter" id="characterCounter"></span>
                </strong>
            </p>
            
            <div id='charsCounterBar'></div>
            
        </div>

</body>
</html>
    

 

CSS Code:

 

styles.css

CSS is just an extra to the code, download the code and try it yourself.

 

You can copy paste code from the page or simply download entire code from demo page.

 

Live Demo

 

Share Button