How to limit character input in textarea including count in jQuery ?

Last Updated : 18 Jan, 2021

In this article, we will set the limit character input in the textarea including count in the jQuery. To set the limit character in the input textarea, we use length property.

Approach:

We create an input text area with a given maxlength and then use jQuery code to limit the characters. First, we set the max limit and then use keyup() method to reduce the textarea character limit by 1 when we click the button and display the count on the screen.

Syntax:

var max_length = 25;
$('textarea').keyup(function () {
    var len = max_length - $(this).val().length;
    $('.GFG').text(len);
});

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to limit character input 
        in the textarea including 
        count in jQuery? 
    </title> 
  
    <!-- Import jQuery cdn library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            var max_length = 25; 
            $('textarea').keyup(function () { 
                var len = max_length - $(this).val().length; 
                $('.GFG').text(len); 
            }); 
  
        }); 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to limit character input 
        in the textarea <br>including 
        count in jQuery? 
    </h3> 
  
    <form> 
          
<p>Maximum input characters: 25</p> 
  
  
        <textarea maxlength="25"></textarea> 
  
          
<p> 
            <span class="GFG">25</span>  
            Characters Remaining 
        </p> 
  
    </form> 
</body> 
  
</html>