How To Count Characters From Textarea Using JQuery

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery We can count number character present in input field or in textarea .So today we discuss how to do it

How To Count Characters From Textarea Using JQuery

Step 1:Create index.html file and implement below code.

<textarea id="text-content" cols="70" rows="4" onKeyup="count_remaining_character()" placeholder="At least 100 character"></textarea>
<h2 id="character-count" align="right">150</h2>


Step 2:Implement jQuery to count characters.
 

<script>
    function count_remaining_character() {
        var max_length = 100;
        var character_entered = $('#text-content').val().length;
        var character_remaining = max_length - character_entered;
        $('#character-count').html(character_remaining);
        if (max_length < character_entered) {
            $('#character-count').css('color', '#FF0000');
        } else {
            $('#character-count').css('color', '#A0A0A0');
        }
    }
</script>


Complete Code For Counting Characters From Textarea Using JQuery
 

<!DOCTYPE html>
<html>
<head>
    <title>How To Count Characters From Textarea Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Count Characters From Textarea Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="well">
            <textarea id="text-content" cols="70" rows="4" onKeyup="count_remaining_character()" placeholder="At least 100 character"></textarea>
            <h2 id="character-count" align="right">150</h2>
            <script>
                function count_remaining_character() {
                    var max_length = 100;
                    var character_entered = $('#text-content').val().length;
                    var character_remaining = max_length - character_entered;
                    $('#character-count').html(character_remaining);
                    if (max_length < character_entered) {
                        $('#character-count').css('color', '#FF0000');
                    } else {
                        $('#character-count').css('color', '#A0A0A0');
                    }
                }
            </script>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>
</body>
</html>

 

Related Post