Character Count In Textarea

In this tutorial I will explain to you character count in textarea or how to count characters from textarea in php. many time client's have requirments like they have to add some number of character in specific field and after that user can not add any data in this field at that time we can dispaly count of character. So, user can manage his/her content in text area.

here, we will add some piece of HTML code with textarea for count character length in php and in the bottom we will add jQuery code in script tag that's it. Using jQuery character count on keypress. So, we will see character count in textarea with remaining character count in textarea in PHP.

 

<!DOCTYPE html>
<html>
<head>
    <title>Count Characters In Textarea Example - techsolutionstuff.com</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
    <h3 class="text-center" style="margin-bottom: 20px;">Count Characters In Textarea Example - techsolutionstuff.com</h3>
     <div class="col-md-8 col-md-offset-2">
        <textarea name="textarea" id="textarea" maxlength="300" rows="5" style="width: 100%" placeholder="Eneter Text Here..." autofocus></textarea>
        <div id="count">
            <span id="current_count">0</span>
            <span id="maximum_count">/ 300</span>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
$('textarea').keyup(function() {    
    var characterCount = $(this).val().length,
        current_count = $('#current_count'),
        maximum_count = $('#maximum_count'),
        count = $('#count');    
        current_count.text(characterCount);        
});
</script>

 

And after that you will get output like below screenshot.

Count Characters in Text area

 


You might also like :

FEATURE POSTS