DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Character Count In Textarea

In this tutorial I will explain to you character count in textarea or how to count characters from text area in PHP. many time client's have requirements 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 display count of character. So, user can manage his/her content in text area.

here, we will add some piece of HTML code with text area 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 text area with remaining character count in text area in PHP.

Read Also : How To Generate QRcode In Laravel

<!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>
Enter fullscreen mode Exit fullscreen mode

And after that you will get output like below screenshot.

Character Count In Textarea


Read Also : How To Add Ckeditor In Laravel

Discussion (0)