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;
const maxLength = target.getAttribute('maxlength');
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
Count the number of characters of a textarea
See also