Count the number of characters of a textarea

Assume that we have a textarea and a normal div elements for showing how many characters user has been entering:

<textarea id="message"></textarea>
<div id="counter"></div>

Use the maxlength attribute

The maxlength attribute sets the maximum number of characters that user can put in the textarea.

<textarea maxlength="200" id="message"></textarea>

Count the number of characters

Handle the input event which is triggered if the value of element is changed:

const messageEle = document.getElementById('message');
const counterEle = document.getElementById('counter');

messageEle.addEventListener('input', function(e) {
const target =;

// Get the `maxlength` attribute
const maxLength = target.getAttribute('maxlength');

// Count the current number of characters
const currentLength = target.value.length;

counterEle.innerHTML = `${currentLength}/${maxLength}`;

Good to know

The common mistake is to capture the keyup event. It doesn't work in some cases such as:

  • User drags a text into the textarea
  • User right-clicks in the textarea and chooses Paste from the context menu



Copy highlighted code to the clipboard
Create a custom scrollbar