Live character counter on HTML textarea using jQuery
You most definitely have been to a website that required you to enter some text with a limited number of characters allowed in an HTML form textarea.
Such scenarios mostly happen on social media sites and business directory websites. Websites such as Facebook, Twitter, and LinkedIn require you to add a short description about yourself or your business when creating or updating your social media account or business page respectively.
You probably have also noticed that these sites give you a specific maximum number of characters(spaces included) that you can include in your description e.g. 500 characters, etc.
Mostly, when you start typing your description, a counter appears just below or beside the textarea. It shows you the number of characters you have already written and/or the number of characters remaining to the maximum allowed. On reaching the maximum length of characters allowed, you are not able to write anything else.
Example
Describe yourself in 500 characters or less
In this article, you will learn why live character count is important and how you can add it to your HTML forms.
Why is live character count important?
Having the knowledge of the number of characters you have already written, and the number remaining can help you to rephrase and remove the unnecessary words and phrases early enough and avoid being caught up unaware when you reach the end without having written the most important points.
How to a character count to your HTML textarea
I will use an example to demonstrate this. I will create a simple HTML page with a textarea and use jQuery to implement the live count.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Live textarea character counter with jQuery</title>
<style type="text/css">
.formdiv{
width: 50%;
display: block;
margin: auto;
margin-top: 20px;
padding: 10px;
box-shadow: 1px 1px 2px;
border-radius: 7px;
background: #f9fcfc;
}
.formdiv h1{
color: #06062a;
font-size: 25px;
border-bottom: 1px dashed #ddd;
}
.contact p{
padding: 5px;
}
form{
padding-bottom: 35px;
}
textarea{
width: 98%;
background: #fff;
border:1px solid #eee;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
#written,#remaining{
width: 50%;
position: relative;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="formdiv">
<h1>Sample Form</h1>
<p>Describe yourself in 500 characters or less</p>
<form>
<textarea id="description" rows="4" maxlength="500" placeholder="Write your description here..." required></textarea>
<p id="written"></p>
<p id="remaining"></p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
var maxlength = 500;
$("#description").keyup(function(){
var currentlength = $(this).val().length;
var remaining = maxlength-currentlength;
$("#written").html(currentlength+" written");
$("#remaining").html(remaining+" remaining");
});
});
</script>
</body>
</html>
Copy-paste the above code and save it as an HTML file then open it with a web browser on your device. It will look like below and will display character count in real-time as you continue to type in the textarea.
Breaking the code down
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Live textarea character counter with jQuery</title>
</head>
<body>
<div class="formdiv">
<h1>Sample Form</h1>
<p>Describe yourself in 500 characters or less</p>
<form>
<textarea id="description" rows="4" maxlength="500" placeholder="Write your description here..." required></textarea>
<p id="written"></p>
<p id="remaining"></p>
</form>
</div>
</body>
</html>
The above HTML code creates the structure of the web page, with a heading, paragraph, and the textarea to input the texts.
In the textarea, we have set the "maxlength" attribute to 500 to prevent writing any more characters after 500 length is reached.
We have also set the "id" attribute to "description", which we will use to identify the textarea in jQuery code.
We also added two paragraphs without any content in them, which we will use in displaying the number of characters written and the other, the number of characters remaining. The paragraph with the id attribute "written" will display the number of characters already written. The paragraph with the id attribute "remaining" will show the number of characters remaining.
CSS code
We have used CSS to style the HTML page to look more attractive and organized.
<style type="text/css">
.formdiv{
width: 50%;
display: block;
margin: auto;
margin-top: 20px;
padding: 10px;
box-shadow: 1px 1px 2px;
border-radius: 7px;
background: #f9fcfc;
}
.formdiv h1{
color: #06062a;
font-size: 25px;
border-bottom: 1px dashed #ddd;
}
.contact p{
padding: 5px;
}
form{
padding-bottom: 35px;
}
textarea{
width: 98%;
background: #fff;
border:1px solid #eee;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
#written,#remaining{
width: 50%;
position: relative;
float: left;
margin: 0;
}
</style>
jQuery code
We have used the jQuery code to count the number of characters written, calculate the number of characters remaining and display them in real-time as one continues to type.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
var maxlength = 500;
$("#description").keyup(function(){
var currentlength = $(this).val().length;
var remaining = maxlength-currentlength;
$("#written").html(currentlength+" written");
$("#remaining").html(remaining+" remaining");
});
});
</script>
The line below imports/adds the jQuery library to the page. Any jQuery code on the page should be written after this line in order to work. You can as well download it and host it in your project then change the src attribute to the relative path to the file.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
$(function(){}) is the shortform of $(document).ready(function(){}). It is used to initialize jQuery after the other page elements have loaded. We put all our jquery code inside its curly braces.
We have set an integer value(500) as the maximum length to use in our jquery code and assigned it to a variable maximumlength as shown below:
var maxlength = 500;$("#description").keyup(function(){ triggers the function when we release the key while in the textarea with the id "description". In the same way as CSS, we use the # before the id attribute value to identify an element but enclosed with quotes and brackets eg. $("#description").
keyup(function(){}) defines what we want to do when the on keyup event is triggered. We add all our code within its curly braces on what we would want to happen when the event is triggered.
In jquery, we use .val() to get the value of an input. In this case, $(this).val() is just the same as $("#description").val() and returns the value of the specified input field which in this case is the text area.
To get the length of a string in jquery, we use the ".length" as shown below:
var string = "I love jquery";
var stringlength = string.length;
So in this case, we get the current length of characters entered in the textarea as below:
var currentlength = $(this).val().length;
Since now we already have the maximum length and the current length of text entered, we can get the remaining characters by subtracting the two as below:
var remaining = maxlength-currentlength;
To add or update the content of an HTML element using jQuery, we use ".html()" after the identifier and pass the content inside the brackets ().
So to display the characters written, and the characters remaining in the empty paragraphs elements that we created, we will just use their respective id attribute values as the identifiers and the count content using .html().
$("#written").html(currentlength+" written");
$("#remaining").html(remaining+" remaining");
You don't have to show both. Just choose one of them. I have shown both just for demonstration purposes.
Conclusion
Live character count is a great way to help people know the number of characters remaining when writing to input fields with a limited number of characters allowed.
In this article, you have learned everything you need to know to add a real-time character counter to your HTML form textareas.
You have learned how to show the number of characters already written, and the number of characters remaining.
