Character Count In Textarea
2 min readOct 4, 2021
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.
<!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.
