Live Characters Counter with JavaScript
The live characters counter functionality is that which tells us how many total characters we entered in the text field or textarea and how remaining.
With the help of the live characters counter, you can show the live indication of how many characters you have entered and how many you can enter.
Typed Characters Count
Let’s have a basic HTML structure of a web page that has an HTML form and form has a textarea field. On that textarea field, we will implement our live counter functionality.
<!DOCTYPE html>
<html>
<head>
<title>Live Characters Count</title>
</head>
<body><h2>Live Characters Count</h2><form action="/action_page.php">
<label for="message">Message:</label><br>
<textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="liveCharactersCount(this);"></textarea><br>
<input type="submit" value="Submit">
</form><p id="characters-count-notification">0 characters</p></body>
</html>
Now make a function and trigger it on the onkeyup event of textarea.
<script>
function liveCharactersCount(obj){
document.getElementById("characters-count-notification").innerHTML = obj.value.length+' characters';
}
</script>Remaining Characters Count
To make the remaining characters count functionality, we will make a javascript function that has max length characters constant.
Get Your Blog Coach’s stories in your inbox
Join Medium for free to get updates from this writer.
And then we will subtract the typed characters count from that max length constant, so we will get the remaining characters.
<!DOCTYPE html>
<html>
<head>
<title>Remaining Characters Count</title>
</head>
<body><h2>Remaining Characters Count</h2><form action="/action_page.php">
<label for="message">Message:</label><br>
<textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="remainingCharactersCount(this);"></textarea><br>
<input type="submit" value="Submit">
</form><p id="characters-count-notification">200 characters remaining</p></body>
</html>
Now, let’s make a javascript function to calculate the total count of characters and then show the remaining character’s counts.
<script>
function remainingCharactersCount(obj){
var maxLength = 200;
var charLength = obj.value.length;
var charRemaining = (maxLength - charLength);
if(charRemaining < 0){
document.getElementById("characters-count-notification").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
} else {
document.getElementById("characters-count-notification").innerHTML = charRemaining+' characters remaining';
}
}
</script>So simply just add the above javascript code in the head section of the HTML page or in a separate file to call this function. You can customize it as you want and make it more stylish using CSS and bootstrap.
