Twitter Like Character Count Validation using jQuery

Last Updated : 17 Nov, 2023

In this article, we will create a web app that mimics the character count validation behavior of Twitter (X). When users start typing in a textarea, the number of characters and a progress bar will appear below the textarea. This basically displays the remaining character count as well as limiting the max length of input text, by using jQuery.

Preview

Approach

The structure will be using HTML, the dynamic character count update–jQuery, and for styling we’ll apply CSS. We are going to include a progress bar which shows visually the number of characters in order to help users to understand how far they are from the limit.

$(document).ready(function() { … }): A jQuery method for assurance that code runs after all of the HTML document loaded, avoiding issues with inaccessible elements. It wraps character count validation code within an anonymous function.
Variable Declarations: The text area with id “tweet” is referenced as tweetInput. The element having id “charCount” can be referred to as charCount.
the element with id “charProgress” is referenced by charProgress. The maximum character size will be 280. charCount.text(“Character count: It initialises character count display at “ + maxCharacters);
tweetInput.on(“input”, function() { … });: Adds a “on input” event listener to tweetInput. Performs and unnamed function when they text.
Counts the number of characters, substitutes emojis, and changes the text color whenever the limit is surpassed.
Character Count Calculation: It computes text length, remaining characters and displays within the input event handler function.
Progress Bar Calculation: It calculates the progress percentage and updates the width of the progress bar in line with the input length.

Example: In this exam we will implement above approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Twitter Like Character Count Validation 
    </title> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0; 
            margin: 0; 
            padding: 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
        } 
  
        .container { 
            width: 100%; 
            max-width: 600px; 
            background-color: #fff; 
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
            border-radius: 15px; 
            padding: 50px; 
            margin: 20px; 
            border: 3px solid #eee; 
        } 
  
        h1 { 
            text-align: center; 
            color: #333; 
            font-size: 1.5rem; 
        } 
  
        #tweet { 
            width: 95%; 
            padding: 10px; 
            font-size: 16px; 
            border: 1px solid #ccc; 
            border-radius: 15px; 
            margin-top: 10px; 
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); 
            resize: none; 
            border: 1px solid #0984e3; 
        } 
  
        #charCount { 
            text-align: right; 
            font-size: 14px; 
            margin-top: 10px; 
        } 
  
        .charCountRed { 
            color: red; 
        } 
  
        #charProgress { 
            height: 10px; 
            background: linear-gradient(to right, #00cec9, #0984e3); 
            width: 0; 
            border-radius: 10px; 
            margin-top: 10px; 
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 
            padding: 5px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h1> 
            Twitter Like Character Count Validation 
        </h1> 
          
        <textarea id="tweet" rows="6" cols="50" 
            maxlength="280"></textarea> 
              
        <div id="charCount" class="charCountRed"> 
            Character count: 280 
        </div> 
  
        <div id="charProgress"></div> 
    </div> 
  
    <script> 
  
        // Wait for the document to be fully loaded 
        $(document).ready(function () { 
            var tweetInput = $("#tweet"); 
            var charCount = $("#charCount"); 
            var charProgress = $("#charProgress"); 
            var maxCharacters = 280; // Maximum character limit 
  
            charCount.text("Character count: " + maxCharacters); 
            // Attach an "input" event listener to the textarea 
  
            tweetInput.on("input", function () { 
                var text = tweetInput.val(); 
                var textLength = text.length; 
                var remainingCharacters = maxCharacters - textLength; 
  
                text = text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, '  '); 
  
                charCount.text("Character count: " + remainingCharacters); 
                  
                // Check if the character limit is exceeded 
                if (remainingCharacters <= 0) { 
                    charCount.addClass("charCountRed"); 
                } else { 
                    charCount.removeClass("charCountRed"); 
                } 
  
                var progress = (textLength / maxCharacters) * 100; 
                charProgress.width(progress + "%"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>