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>

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 by handling 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}`;
});

Source

https://htmldom.dev/count-the-number-of-characters-of-a-textarea/