Character Count In Textarea

In this small tutorial i will explain you how to character count in textarea, 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. in this we will see how to count character from textarea using jQuery.

Here, we will add some piece of HTML code with textarea and in the bottom we will add jQuery code in script tag that’s it.

<!DOCTYPE html>
<html>
<head>
<title>Count Characters in Textarea Example - websolutionstuff.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 - websolutionstuff.com</h3>
<div class="col-md-8 col-md-offset-2">
<textarea name="textarea" id="textarea" maxlength="300" rows="5" style="width: 100%" placeholder="Write 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 screen print.

Character Count In Textarea
Character Count In Textarea

Read Also : How To Generate QRCode In Laravel

And also, don’t forgot to “claps” if you like this post.

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.