Hi Developer ,
Lets see How to count character In Textarea. It was done by using the .keyup() function in the javascript . When the input in the textarea gets changed the keyup function gets triggered and calculates the amount of character.
Create the HTML file
<!DOCTYPE html>
<html>
<head>
<title>Count Characters In Textarea Example - ITSolutionsGuides</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 - ITSolutionsGuides</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>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides