Character Count In Textarea
Published
•1 min readW
The websolutionstuff is to help for beginner programmers who want to start career in web development or learn web development technologies or languages.
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>
