Skip to content
Related Articles

Related Articles

Improve Article

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=
    </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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :