17/97

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 = e.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
Demo
(source)

Might be useful