Live Character Counter using JavaScript

The character counter counts the number of characters entered in the text field. It helps to show the notification about the number of characters written in the text box. If you want to show the entered characters count or remaining characters count in textarea, character counter is the best option for that.

Live character counter will show the character numbers when the user starts entering text in the input field or textarea. You can easily add character counter to textarea using JavaScript. In this tutorial, we will show you how to implement live character counter with JavaScript for live word count in the text field.

The characters counter is used for many purposes in the text field. Here we will show you some most commonly used character count functionality in the text field. The example code counts characters of the text field and displays the number on the web page.

Live Characters Count

The following code counts the number of characters entered in the textarea field and shows counter to the user.

JavaScript Code:
The countChars() function sets the length of text to charNum element using innerHTML property.

function countChars(obj){
    document.getElementById("charNum").innerHTML = obj.value.length+' characters';
}

HTML Code:
The countChars() function is called by onkeyup event that triggers when the user starts typing.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">0 characters</p>

Live Characters Count with Max Length

The following code counts the number of characters and shows how many letters are entered in the maximum character.

JavaScript Code:
The countChars() function sets the text length to charNum element using innerHTML property. If text length is greater than max length, the color will be red.

function countChars(obj){
    var maxLength = 20;
    var strLength = obj.value.length;
    
    if(strLength > maxLength){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">'+strLength+' out of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = strLength+' out of '+maxLength+' characters';
    }
}

HTML Code:
The countChars() function is called by onkeyup event that triggers when the user starts typing.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">0 characters</p>

Remaining Characters Count

The following code counts the remaining characters in the textarea field and shows whether the user exceeds the limit of maximum length.

JavaScript Code:
The countChars() function sets the remaining text length to charNum element using innerHTML property. If the user exceeds the maximum length, the color will be red.

function countChars(obj){
    var maxLength = 20;
    var strLength = obj.value.length;
    var charRemain = (maxLength - strLength);
    
    if(charRemain < 0){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
    }
}

HTML Code:
The countChars() function is called by onkeyup event that triggers when the user starts typing.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">25 characters remaining</p>

Conclusion

Our example code helps you to implement a simple character counter with JavaScript. You can easily get the length of string and display the characters count in the text field. For example, we have used textarea, but you can use countChars() function for any text box or input field.