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
How To Create List And Grid View Using JavaScript
How To Create List And Grid Vi...

In this article, we will see how to create a list and grid view using javascript. many times clients have requirements l...

Read More

Dec-23-2020

How To Reset Modal Form In jQuery
How To Reset Modal Form In jQu...

Have you ever seen those pop-up boxes on websites? They're called modal forms, and they make it easier to do things...

Read More

Jan-04-2023

How To Install Tailwind CSS In Laravel 9
How To Install Tailwind CSS In...

In this article, we will see how to install tailwind CSS in laravel 9. Tailwind CSS works by scanning all of y...

Read More

Jun-13-2022

Node.js Express CRUD Example with MySQL
Node.js Express CRUD Example w...

Hello Guys, In this tutorial we will see how to perform Node js Express CRUD example with mysql. Node js Express ...

Read More

Aug-02-2021