In this article, we will explain to you how to count characters from textarea. many times a client has requirements like they have to add some number of characters in a specific field and after that user can not add any data in this field at that time we can display the count of characters. So, users can manage his/her content in the text area.
So, let's see Textarea character count jquery and Textarea remaining character count javascript.
here, we will add some pieces of HTML code with textarea and at the bottom, we will add Jquery code in the 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 the below screen print.
You might also like:
In this article, I will guide you through the process of installing php-bcmath on Ubuntu. Php-bcmath is a PHP extension...
Jul-12-2023
In this article, we will see laravel 9 two-factor authentication using email. Here, we will send the OTP code to em...
Dec-22-2022
In this article, we will see laravel 9 socialite login with a google account. This post gives you an example of a larave...
Apr-15-2022
For finding the right web hosting provider, you need to do a lot of research. There are hundreds of web hosting provider...
Nov-12-2021