Character Count In Textarea

Websolutionstuff | Jul-08-2020 | Categories : Laravel PHP jQuery HTML

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.

Step 1: Add HTML Code
Step 2: Add Textarea in HTML Code
Step 3: Add Jquery Code

 

 

<!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.

characters_count_in_textarea

 


You might also like:

Recommended Post
Featured Post
Laravel 9 User Role and Permission
Laravel 9 User Role and Permis...

In this article, we will show you laravel 9 user role and permission with an example. here we will see how to set u...

Read More

Mar-02-2022

How To Replace All Occurrences Of String In Javascript
How To Replace All Occurrences...

In this article, we will see how to replace all occurrences of a string in javascript. You can use the javascript r...

Read More

Nov-07-2022

How To Get Children Element In jQuery
How To Get Children Element In...

In this article, we will see how to get the children of this selector in jquery. You can use the find() method...

Read More

Jul-13-2022

Laravel 8 Form Validation Example
Laravel 8 Form Validation Exam...

In this article, we will see the laravel 8 form validation example. form validation in laravel is a very common fun...

Read More

Oct-10-2020